前言：

在各种环境安装过程中，会遇到各种各样的问题，有好多问题因为本人忘记第一时间保留错误信息漏掉了，也有一些问题莫名奇妙的好了，如果各位发现有不对的地方或是不完善的地方，随时修改。顺便吐槽下android开发环境太苦逼了。

一. 安装工具

1 搭建iOS环境

参照步骤： https://reactnative.cn/docs/0.51/getting-started.html

注意：以下为安装iOS环境是遇到的问题：

问题1：当修改权限时执行 sudo chown -R whoami /usr/local 报 chown: /usr/local: Operation not permitted 错误时，可能需要重新安装一下 brew工具 （因为在os10.11的时候系统多了一个Rootless机制，Rootless机制是对抗恶意程序的最后防线）

执行如下指令：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)”

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”

问题2 ：安装完brewhome 之后，ruby找不到了，pod也无法使用，如下图所示：

D818CF5E-1CD4-44A2-86C9-A09E5F35B8ED.png

解决方式： 通过brew install ruby ，重新安装了一个ruby

2.搭建Android运行环境

参照步骤： https://reactnative.cn/docs/0.51/getting-started.html 选择android平台，（从此进入一条魔鬼之路）

1. 如果本机没有java环境，需要下载java环境 下载 1.8 版本； 下载链接 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

2. 下载AndroidStudio 和安装 Android SDK环境 ；
   官方下载地址http://developer.android.com/sdk/index.html 下载正式版 AndroidStudio 工具 （非常慢，并且需要翻墙）
   也可以到这个网站上下载：http://www.androiddevtools.cn

3. 下载完AndroidStudio后进行安装 参照https://reactnative.cn/docs/0.51/getting-started.html#content里边的具体设置步骤；安装完启动Android Studio时，会报如下图错误：
   

   8957300F-CA4E-4A18-9DDC-82E3E33344DE.png

   问题原因：没有找到Android SDK环境，说明SDK下载失败，建议最好找网络较好的环境下载，预计要下载一晚上；（非常慢且需要翻墙）；
   常规的解决的方法是老老实实下载SDK，但如果网络环境确实不行，可以把其他开发人员的电脑上下载好的 Android SDK考过来，但是这个会引入新的问题，一般情况SDK路径都在/Library/Android/sdk 目录下，可以通过 终端执行echo $ANDROID_HOME查看具体的路径；
   本人就是把其他人员的SDK copy到这个目录下的，本以为万事大吉，结果发现 执行 adb 指令时 发现报错，按照网上查的资料大部分都是说路径不对找不到，但我确认路径没问题，进入/Users/mao/Library/Android/sdk/platform-tools 下手动点击adb 执行脚本，结果发现问题如下图，原来是copy过来的sdk，被系统拦截了，然后手动确认后，其他执行文件我都挨个点了一遍，完美解决了； 但是目前还不知道是否会遇到其他问题，最好还是老老实实从官方下载SDK；

   
   image.png

4. 安装Genymotion 和 VirtualBox工具； 下载地址：https://www.genymotion.com/account/login/ 建议官方网站上下载最新版本，老版本在安装模拟器时下载到100%时总会提示下载文件有问题；注意：这个针对个人用户是免费的，需要用户自己注册账号； （下载也比较慢）
   

   51B35DB8-A179-4FA1-926A-9E958ACE0E28.png

5. 在Genymotion 中设置custom 的sdk 环境，这样在终端中执行 react-native run-android 可以启动，不然会报错只能通过允许android studio来启动；配置如下图：

   
   3980CEAB-B401-404D-941F-39CE86EB547E.png

二. 创建RN工程

2.1 直接创建一个RN工程

终端执行 react-native init TestRN //开始自动创建工程

说明：初始化需要一段时间，初始化完成后，会看到如下log信息，说明ReactNativew 环境安装完成；

8FB9F42E-78A7-43BE-90B9-E521A7810520.png

可以通过提示的方法，启动工程：

To run your app on iOS:

cd /Users/mao/Desktop/AwesomeProject

react-native run-ios

• or -

Open ios/AwesomeProject.xcodeproj in Xcode

Hit the Run button

注意：

问题1：在执行 react-native run-ios 启动工程时，如果遇到如下的错误信息：

xcrun: error: unable to find utility "instruments", not a developer tool or in PATH

解决方法 执行sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/

在启动就正常了

问题2：在执行raect-native start的过程中，出现 ERROR Metro Bundler can't listen on port8081 错误，说明端口被占用了，如图：

8B765B7B-FE17-4938-88FB-B5499065350B.png

解决：

说明端口被占，之前有服务没有停止，关闭终端窗口，重新执行 react-native run-ios 即可，如果还不行，执行如下命令可查询哪些服务在使用该端口号：

lsof -i :8081 // 打印使用8081端口的服务；

kill -9 <PID> //可以杀死该进程；

问题3：通过reac-native run-android 时，出现如下错误：

5EF122CF-C9F7-4A01-97A8-22E133962ED4.png

解决方式：先手动打开Genymotion ，启动一个android模拟器, 在执行 上述指令即可启动android模拟器安装应用；

2.2 在已有工程中引入RN框架

可参照流程：[https://reactnative.cn/docs/0.51/integration-with-existing-apps.html#content](https://reactnative.cn/docs/0.51/integration-with-existing-apps.html#content)

1. 通过xcode 创建一个新工程

2. 然后可在项目根目录下创建一个ReactComponent的文件夹用来放react相关的文件；

3. 在ReactComponent中创建一个package.json 配置文件，这个文件相当于podfile文件一样为安装；

4. 执行 npm install ，此时会花费一定的时间node_modules文件，有可能出现如下问题：

   
   AE9862E7-6956-4403-81BB-DE6A355AA0B8.png

   解决： npm cache clean --force 执行一下清理就可以了

5. 修改podfile文件，引入react库文件，需要注意当前使用的rn版本，可以在package.json中查看，也可以使用react-native -v的方式查看当前的版本；

6. 修改完podfile文件之后，在此执行一下pod install指令，注意：因为react库在npm 里边已经存在，并且已经下载到本地，所以这里边用的是本地路径；如果出现如下图所示错误， 说明依赖的库没有找到：

   
   B18B1FED-A1B8-4062-97D3-CF39274B1A15.png

   解决：在podfile文件里边，加入 pod "Yoga", :path => "./ReactCommponent/node_modules/react-native/ReactCommon/yoga” 即可。

7. 编写index.js 文件即可看到RN执行后的页面效果；