Mac下ReactNative的环境搭建

随着Facebook开源ReactNative，目前越来越多的公司开始在项目中引入此开源框架，所以现在也加入到学习中来。

一  .环境配置

在mac上搭建React环境需要下面这些工具

Android Studio, node.js, the React Native command line tools, and Watchman.

首先来安装 node 和Watchman

这里我是通过 Homebrew来安装的，安装很简单打开mac的终端将 

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

这段粘贴到命令行中即可，等它安装好了，就可以安装node来

具体命令为

brew install node

同理Watchman也是同样安装命令为

brew install watchman

安装好了以后就开始安装 React Native command line tools

在这之前已经安装了node了，所以在这通node npm来安装具体命令如下：

npm install -g react-native-cli

如果安装失败，提示权限错误这时可以输入下面命令

sudo npm install -g react-native-cli

如果的If you get error Cannot find module 'npmlog', 这个错误

try this before: curl -0 -L http://npmjs.org/install.sh | sudo sh.

接下来的话就是android开发环境的搭建我就不一一说了。

但是这个地方要注意的就是最后一定要设置环境变量：ANDROID_HOME，刚开始没设置一直包找不到sdk错误

export ANDROID_HOME=‘你的sdk的路径’

如果上面这些都做完了就可以开始建立reactnative项目了

二 初始化项目

在终端中输入

react - native init AwesomeProject

AwesomeProject为工程名字可以按自己需求去命名。初始化完成后就cd 进入工程根目录cd AwesomeProject

然后启动模拟器，真机的调试在后面介绍。启动后在终端输入react-native run-android ，等待编译完成后就可以在模拟器上看到

如果想对其进行修改 就修改 index.android.js 文件，然后双击R健进行重载，在模拟器上看到更新后的效果就是成功了。效果如下

三.Android 真机调试

第一次在真机上运行直接报错了，bridge configuration isn't available" error ，看官网解决方案如下:

如果是 5.0 或者以上机型，可通过 adb 反向代理端口，将 Mac 端口反向代理到测试机上。

1. Run adb reverse tcp:8081 tcp:8081

如果 5.0 以下机器，通过react-native start --port [PORT] 启动Debug Server，然后应用安装到测试机上之后，摇动设备，在弹出菜单中选择 Dev Setting > Debug Server host for device，然后填入 Mac 的 IP 地址可以在wifi设置看也可通过ifconfig来看

这样以后就可以在真机上调试了。

如果是想在之前项目基础上引入reactnative 可 参照次文章