React Native踩到的坑

好久没写简书了，正好最近又比较有空就研究了一下React Native，目前也就只是按照官网上的教程搭建好了开发环境，下面就简单记录一下我踩到的坑吧。补充说明，我用的是mac的系统，环境搭建我这里也只是简单的说明。

环境搭建

我是参照官网的Getting Started一步一步操作的

1. 安装Homebrew
   通过Homebrew来安装node和watchman

2. 安装node,watchman

3. 安装The React Native CLI
   这里可能会遇到一个权限的问题，使用sudo轻松解决

sudo npm install -g react-native-cli

4. 安装Xcode
   我这里只是将Xcode更新到最新的版本了，是8.1版本

5. Testing your React Native Installation

• 创建一个AwesomeProject项目

react-native init AwesomeProject

• iOS版本的运行

// 进入到项目的根路径
cd AwesomeProject
// 运行iOS版本
react-native run-ios

iOS运行效果

• Android版本的运行

// 进入到项目的根路径
cd AwesomeProject
// 运行iOS版本
react-native run-android

Android运行效果

踩到的坑

react-native init AwesomeProject 特别慢

这个是因为官方的npm源不是很稳定，我们可以替换成淘宝的
执行下面的命令就可以

npm config set registry=http://registry.npm.taobao.org/

Command run-android unrecognized

解决这个问题，我是通过执行在项目的根目录下执行下面一句话完成的

npm install

如果不行再看看这里

Could not get BatchedBridge

Android运行App的时候出现红色提示，遇到这个问题还挺吓人的

红色提示

解决方案如下：

1. 确保你的手机和你的电脑是在同一个网络下面。
2. 进入到红色界面后摇晃一下手机，选择->Dev Settings->Debug server host & port for device。
3. 输入你的电脑ip:80801即可。
4. 返回界面选择Reload就可以正常显示了。