初识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 的技术资料 你们能够多多学习。