初识React Native 入门配置篇

这篇博文记录了我第一次接触React Native的心酸历程，在此记录下来，以便以后查阅，也希望给别的朋友一些帮助。

废话不多说，不知道React Native是什么东西的朋友，请自行google，下面开始正文。

由于我使用的是Mac 所以这里只针对 OS X系统。

要使用React Native 我们需要安装以下工具：

1，homebrew

安装方法：

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

在终端执行以上命令，等待安装完成。

2，安装node

在终端执行：brew install node （注意，这里安装的node 只适合React Native开发，并不包含node.js的Web开发功能）

3，第二步完成后 我们需要安装watchman

在终端执行：brew install watchman

以上步骤均完成以后 下面我们就要开始配置IOS和Android的开发环境了，由于我是Android开发 所以系统已经配置了ANDROID_HOME环境变量，还需要安装Android sdk，都配置完成以后 就可以执行下面的操作

安装 react-native-cli,由于我们要从npm官网下载文件 所以需要安全上网法，或者是将npm的仓库源替换为国内镜像

执行

npm config set registry https://registry.npm.taobao.org

npm config set disturl https://npm.taobao.org/dist

然后再执行npm install -g react-native-cli 进行安装，完成以后 我们就可以初始化第一个HelloWorld程序了

执行命令：react-native init HelloWord

这里时间会比较长，你懂得。等待完成以后 在/Users/x你的用户名/  目录下会有一个HelloWorld文件夹打开以后如下图

这就是我们的项目文件了，其中index.android.js是Android平台的程序入口文件index.ios.js当然就是ios平台的入口文件了。

接下来就是要将项目跑起来了，我是用的真机，将手机连接电脑usb，开启手机的开发者模式，然后进入到HelloWorld这个目录，执行react-native run-android命令，第一次运行可能会提示找不到Android sdk 目录，根据提示 在HelloWorld/android 目录中新建一个文件 名称为local.properties 的文件，在里面写上 sdk.dir=/xxx/xxx/sdk(这后面是你的sdk目录)，我第一次运行是这样解决的，然后我把项目删除再新建项目后运行就好了，不清楚是为什么。

第二个问题就是权限不足，这个问题 比较简单 执行sudo chmod -R 777 /xxx 你的项目目录

然后再次部署项目到设备 基本成功，但是在手机上运行出来是一片空白，什么都没有显示，心里又是一顿抓狂，最后找到原因，是由于项目安装到手机后没有给显示悬浮窗的权限，在手机设置里给添加上这个权限就OK了，再次运行，屏幕一片红，下方出现了“Reload JS”的按钮， 显示异常 ReferenceError:Can't find variable:_fbBatchedBridge，看到这个不要惊慌，使劲摇晃手机 在出来的菜单里选择“Dev Settings”，然后点击最下面的“Debug server host & port for device“，然后填入你电脑的ip:8081必须是你的手机和你的电脑在同一个局域网内才可以。设置完成以后再重启应用 你就可以看到Reac Native的欢迎界面了，就是index.android.js页面的内容。

好了，这里给大家推荐一下http://reactnative.cn/  

这里有很多关于React Native 的技术资料 大家可以多多学习。