配置主要分为以下几步:
- 安装node.js
- 安装AndroidStudio
- 安装React Native命令行工具
- 搭建React Native版本的Hello World,修改代码查看效果
第一步
下载node.js,安装并配置环境变量。下载地址:https://nodejs.org/en/download/。
检验是否配置成功,命令行输入:node -v
成功则会显示nodejs版本,否则配置有问题。
第二步
安装AndroidStudio。下载地址:https://developer.android.google.cn/studio/。
安装完成后在设置中选择需要的SDK以及安装位置。
SDKPlatforms中选择准备开发的安卓版本。
SDKTools中选择需要的工具。值得一提的是,之后运行虚拟机可能会报关于HAXM的错(File Not Found),其中一个原因就是没安装Intel x86 Emulator Accelerator工具,另一个原因可能是系统未开启cpu加速,需要在bios中设置开启VT-x。当然还有可能是cpu太老不支持,可以进入目录:%前面配置的SDK安装位置%\extras\intel\Hardware_Accelerated_Execution_Manager中找到haxm_check.exe的文件,用命令行打开,检查系统是否支持该功能。
安装完成后配置环境变量,添加ANDROID_HOME = %前面配置的SDK安装位置%,path加上%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;
在AS菜单栏中找到AVD Manager,打开配置虚拟机,记得下载选择的系统镜像。
AS默认将虚拟机放在C:\Users\Administrator\.Android中,占用大量c盘空间。于是可以修改放置位置。添加ANDROID_SDK_HOME=%目标路径%,将%ANDROID_SDK_HOME%放入path,并将.Android文件夹整个移动到目标路径下,重启AS即可。
第三步
在命令行输入:npm install -g react-native-cli
安装成功后输入react-native -v 可查看React Native版本号
第四步
在命令行中移动到计划添加React Native工程的文件夹,输入:react-native init HelloWorld。官网:https://facebook.github.io/react-native/docs/getting-started.html。
创建完成后输入:react-native run-android,安卓将直接将app安装到打开的虚拟机,若有硬件连接则优先安装到硬件,这个安装和配置过程会持续一段时间。
完成后在屏幕上会看到欢迎界面。此时修改工程目录下App.js文件,比如向render方法中添加一行。安卓在虚拟机中双击r刷新查看效果。可随意修改代码以查看各模块功能。
<Text style={{
flex:1,
top:20,
left:50,
fontSize:18
}}>HELLO WORLD</Text>
Facebook提供详细的React Native帮助文档,地址:https://facebook.github.io/react-native/docs/tutorial。
ps: android_studio 更新gradle有时候特别慢,还容易中断,导致工程初始化失败。这种情况下可以自己从官网下载gradle手动配置。官网:https://services.gradle.org/distributions/。
在项目目录下寻找gradle/wrapper/gradle-wrapper.properties,确认里面distributionUrl中版本号与手动下载的版本号匹配。之后将下载好的压缩包放入AS默认地址:
C:\Users\YOURUSERNAME\.gradle\wrapper\dists\gradle-4.4-all\9br9xq1tocpiv8o6njlyu5op1
其中本例使用gradle4.4,后面一串码是AS自动生成的(需要先在AS中点击“Sync Project with Gradle Files”图标,待生成文件夹后关闭AS进行手动配置)
现在重启AS,再次点击“Sync Project with Gradle Files”图标,成功更新。
参考:http://www.jianshu.com/p/e887203e30f6
**使用旧版Navigator组件
npm install -g yarn react-native-cli
yarn add react-native-deprecated-custom-components
**设置国内镜像
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
**2019RN官网开始使用Expo生成与管理RN项目,Expo链接:https://expo.io/learn
第三步:npm install expo-cli --global
第四步:
expo init my-project
cd my-project
expo start