步骤:
1/ 安装 Chocolatey
2/安装Python 2
3/安装Node
4/Yarn、React Native的命令行工具(react-native-cli)
5/安装Android Studio
8/将Android SDK的Tools目录添加到PATH变量中
9/可选的安装项
9.1 git
9.2 模拟器
10/测试安装
11/修改项目
相关命令和方法
1/安装 Chocolatey
@powershell -NoProfile -ExecutionPolicy Bypass -Command"iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))"&& SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
2/安装Python 2
chocoinstallpython2
3/安装Node
打开命令提示符窗口,使用Chocolatey来安装NodeJS。
chocoinstallnodejs.install
安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别!
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
4/Yarn、React Native的命令行工具(react-native-cli)
Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
npm install -g yarn react-native-cli
安装完yarn后同理也要设置镜像源:
yarn config set registry https://registry.npm.taobao.org--global
yarn config set disturl https://npm.taobao.org/dist--global
如果你遇到EACCES: permission denied权限错误,可以尝试运行下面的命令(限linux系统):sudo npm install -g yarn react-native-cli.
安装完yarn之后就可以用yarn代替npm了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install --save 某第三方库名。
注意:目前npm5(发文时最新版本为5.0.4)存在安装新库时会删除其他库的问题,导致项目无法正常运行。请尽量使用yarn代替npm操作。
5/安装Android Studio Android开发都会不在赘述
确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。
打开控制面板->系统和安全->系统->高级系统设置->高级->环境变量->新建
具体的路径可能和下图不一致,请自行确认。
![](https://img.haomeiwen.com/i6102705/cbaec1d74113298a.png)
你需要关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效。
开启Gradle Daemon可以极大地提升java代码的增量编译速度。
(ifnotexist"%USERPROFILE%/.gradle"mkdir"%USERPROFILE%/.gradle") && (echo org.gradle.daemon=true >>"%USERPROFILE%/.gradle/gradle.properties")
其实就是在用户目录下,找到 .gradel 文件夹,创建一个文件gradle.properties ,添加内容
org.gradle.daemon=true
8/将Android SDK的Tools目录添加到PATH变量中
你可以把Android SDK的tools和platform-tools目录添加到PATH变量中,以便在终端中运行一些Android工具,例如android avd或是adb logcat等。
打开控制面板->系统和安全->系统->高级系统设置->高级->环境变量-> 选中PATH-> 双击进行编辑
注意你的具体路径可能和下图不同
![](https://img.haomeiwen.com/i6102705/54ad2e50076a2d4a.png)
9/可选的安装项(不在赘述)
9.1 git
9.2 模拟器
10/测试安装
react-nativeinit AwesomeProjectcd AwesomeProjectreact-nativerun-android
11/修改项目
使用你喜欢的文本编辑器打开App.js并随便改上几行
按两下R键,或是用Menu键(通常是F2,在Genymotion模拟器中是⌘+M)打开开发者菜单,然后选择 Reload JS就可以看到你的最新修改。
在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的应用的日志。
12/错误解决
中间有时候需要指定版本 react-native init rnstarter --version 0.55.4
网友评论