【RN】React Native 本地开发环境搭建

安装流程:

1. 使用管理员权限打开命令行提示符，通过poweshell安装chocoloatey

Chocolatey是一个Windows上的包管理器，类似于linux上的yum和apt-get。你可以在其官方网站上查看具体的使用说明。一般的安装步骤应该是下面这样：

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

一般来说，使用Chocolatey来安装软件的时候，需要以管理员的身份来运行命令提示符窗口。译注：chocolatey的网站可能在国内访问困难，导致上述安装命令无法正常完成。请使用稳定的翻墙工具。如果你实在装不上这个工具，也不要紧。下面所需的python2和nodejs你可以分别单独去对应的官方网站下载安装即可。

2. 下载python2，并安装，然而，并不支持python3，所以windows装了两个python版本的要注意，调用python命令的时候，调用的是python2，所以需要将python3.x版本的python.exe修改成python3

设置环境变量的时候也要注意

choco install python2

3. 下载Node，并安装

打开命令提示符窗口，使用Chocolatey来安装NodeJS。

choco install nodejs.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. 使用Node内置的npm安装react-native

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开发环境。（jdk，adk，adt）配置adk环境变量

如果使用模拟器调试，最好下载genymotion模拟器，比as自带的模拟器快上几倍不说

6. 测试安装环境：

6.1  react-native init projectname --version '1.0.0' （version参数可以不加）
6.2 cd projectname
6.3 react-native run-android

7. 常见问题整理：

Error: com.android.ddmlib.InstallException: Failed to establish session
解决方式：开启手机应用的悬浮窗权限

build fail : android build tools 和 gradle 版本不一致
打开android project 的build.gradle ，修改gradle plugin的版本
同样打开android project 项目的build.gradle，修改build tools的版本
如果没有，打开android studio 里面的android sdk manager找到需要的build tools版本

Error：unknown host service
1. 检查电脑端口是否被占用：8081是node.js的端口，5037是app端的端口
netstat -ano | findstr "5037"
打开资源管理器，任务-PID，查找到删除后，重新reload project

2. 关闭小米的Miui优化功能

Error: 安装打开后白屏现象
检查应用悬浮窗权限

TIM图片20171206171545.png

最后编辑于：2017.12.06 17:17:28