React Native开发

React Native+VS Code+Android环境搭建

2018-06-22  本文已影响62人  Jason_兵哥

看了很多其他人写的安装步骤,但没有写安装Android SDK这一环节,所以我在他们的基础上把整个的环节都记录下。

本机系统:Win 10

环境需要的软件:

1. Node.js

2. Java JDK

3. Android SDK

4. VS code

5. React Native 

相关命令:

react-native init projectname,

react-native run-android

adb device 查看可用调试设备


一、Node.js

下载并安装,https://nodejs.org/en/download/

配置环境变量:(目的是为了在cmd中任何路径下可以执行npm)

参考地址:https://www.cnblogs.com/zhouyu2017/p/6485265.html


二、Java SDK

1、下载jdk(http://www.oracle.com/technetwork/java/javase/downloads/index.html),我下载的版本是:jdk-7u13-windows-i586.exe

2、安装jdk-7u13-windows-i586.exe

3、配置环境变量:右击“我的电脑”-->"高级"-->"环境变量"

1)在系统变量里新建“JAVA_HOME”变量,变量值为:C:\Program Files\Java\jdk1.6.0_14(根据自己的安装路径填写)

2)新建“classpath”变量,变量值为:.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar

3)在path变量(已存在不用新建)添加变量值:%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin(注意变量值之间用“;”隔开)

4、“开始”-->“运行”-->输入“javac”-->"Enter",如果能正常打印用法说明配置成功!

补充环境变量的解析:

JAVA_HOME:jdk的安装路径

classpath:java加载类路径,只有类在classpath中java命令才能识别,在路径前加了个"."表示当前路径。

path:系统在任何路径下都可以识别java,javac命令。


三、Android SDK

下载地址:http://www.androiddevtools.cn/

下载安装包, 安装到自己指定的目录,我的是:E:\Jobs\ReactNative\Android\android-sdk,

同时进行环境变量设置:目的是使用adb命令等

然后就双击“SDK Manager.exe”,启动SDK Manager,如图所示:

由于使用React-Native init projectName 出来的项目版本是23.0.1,所以模拟器就只下载对应的版本,全程安装需要翻墙。

整个SDK安装过程时间很长,还需要取决于VPN网速等,一次安装失败则需要多试几次。


四、VS code

地址:https://code.visualstudio.com/

安装:React Native Tools

菜单--》查看--》扩展: 搜索 “React Native”,如下图

然后重启电脑


五、新建测试项目

1. 新增模拟器, 并运行start

2. 使用VS Code 新建项目, 查看--》集成终端

在项目目录下输入命令: react-native init projectname

进入调试配置:

遇到问题以及解决办法:

1. 遇到Licence问题:

在cmd中到路径下:E:\Jobs\ReactNative\Android\android-sdk\tools\bin

执行:sdkmanager.bat --licenses, (网上大部分是这样解决的,但我安的版本没有这个参数,   sdkmanager.bat --update 解决)

2. 模拟器运行一直在Android界面

听说这个可以解决

3. 使用命令 adb device 可以看到所以的模拟器以及连接的真机,可以关掉模拟器,直接使用真机调试。

修改代码后,模拟器可以按两下R, 真机则摇晃,然后点reload

上一篇 下一篇

猜你喜欢

热点阅读