一、准备工作
首先,需要安装nodejs,可以从nodejs官网下载,注意,React Native 要求node版本在4.0或以上;否则会出错,我建议把node版本升到最新版本,防止后面出现各种莫名其妙的问题,我这里安装的版本是v6.9.3LTS的,安装之后npm也一并安装好了,可以运行命令查看当前node版本和npm版本;
node -v
v6.9.2 npm -v
3.10.9
注意:由于众所周知的原因,国内一些网站无法打开,所以建议先打开VPN等*软件,我这里用的是蓝灯,这里一定要注意,否则后面的步骤无法进行;
二、正式开始
安装Android Studio并配置Android虚拟机
1、下载Android Studio安装包,然后进行安装,安装的过程很简单,直接点下一步即可;安装的过程可能要等待数十分钟,直到点Finish完成;
2、进行环境变量的配置:
a、添加ANDROID_HOME环境变量:
b、将Android SDK的Tools目录添加到PATH变量中
你可以把Android SDK的tools和platform-tools目录添加到PATH变量中,以便在终端中运行一些Android工具,例如android avd或是adb logcat等。
3、打开命令行窗口,输入android,进入到Android SDK Manger,下载我们需要的SDK;
Tools/Android SDK Tools (24.3.3)
Tools/Android SDK Platform-tools (22)
Tools/Android SDK Build-tools (23.0.1)(这个必须版本严格匹配23.0.1)
Android 6.0 (API 23)/SDK Platform (1)
Extras/Android Support Library(23.0.1)
Extras/Android Support Repository
4、切换到Android 6.0选项卡,注意:必须选择这项,因为React Native目前必须要这个版本的,然后就是等待下载并安装,安装完成后关闭就行,Android SDK Build-tools必须选择23.0.1,否则后面会出现错误 ;
5、下载进行安卓虚拟机的配置,当然,也可以用真机进行测试,首先打开Android Studio,新建一个空白工程,根据实际需要,选择合适的工程目录(project location),强列建议工程目录不要建在C盘,我这里选择的是D盘,其它的采用默认配置即可;
6、点击顶部菜单栏手机图标进行下一步,选择一个模拟设备;
7、点击上图中绿色的三角图标,就可以打开虚拟机了;
8、至此,Android相关的配置工作就结束了,下面进行React Native工程的构建;
三、创建React Native工程
1、打开命令行窗口,在弹出的命令框当中输入以下指令,回车
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
2、可以运行下面命令,查看NPM库是否切换为阿里源;
npm config get registry
3、安装react-native命令行工具
npm install -g react-native-cli
4、创建项目,进入工作目录,运行
cd D:\react-native-demos
react-native init AwesomeProject
并耐心等待数(或数十)分钟。
5、运行packager
react-native start
可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本(看到很长的js代码就对了)。第一次访问通常需要十几秒,并且在packager的命令行可以看到形如[====]的进度条。
6、运行模拟器,保证模拟器处于打开状态;
7、安卓运行,保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行
react-native run-android
首次运行需要等待数分钟并从网上下载gradle依赖。最好提前把VPN等*软件打开,确保网络连接状态良好可以下载;运行完毕后可以在模拟器或真机上看到应用自动启动了。
成功后手机界面:
8、接下来就可以用Android Studio或者Webstorm等开发工具进行开发了!