React Native 环境配置

搭建环境笔记记录：

搭建开发环境

1. 安装node， watchman

   brew install node
   brew install watchman
   复制代码

2. 设置镜像加速

   npm config set registry https://registry.npm.taobao.org --global
   npm config set disturl https://npm.taobao.org/dist --global
   复制代码

Watchman则是由 Facebook 提供的监视文件系统变动的工具。安装此工具能够提升开发时的性能（packager 能够快速捕捉文件的变化从而实现实时刷新）

3. Yarn、React Native 的命令行工具（react-native-cli）

   Yarn是 Facebook 提供的替代 npm 的工具，能够加速 node 模块的下载。React Native 的命令行工具用于执行建立、初始化、更新项目、运行打包服务（packager）等任务。

   npm install -g yarn react-native-cli
   复制代码

4. 安装完 yarn 后同理也要设置镜像源

   yarn config set registry https://registry.npm.taobao.org --global
   yarn config set disturl https://npm.taobao.org/dist --global
   复制代码

建立项目

1. 到固定的目录下建立项目文件夹

   react-native init AwesomeProject
   复制代码

2. 运行项目

   cd AwesomeProject
   react-native run-android
   复制代码

遇到的问题

运行 react-native start 是一直卡在 loading dependency graph...

最后出来 unable to talk to your watchman on /usr/local/var/run/watchman/xiuchengyin-state/sock

1. 在 /AwesomeProject/android/app/src/main 目录下建立 空目录 assets目录
2. 回到 /AwesomeProject 下，执行如下命令：

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest  android/app/src/main/res
复制代码

最终HelloWorld页面起来了：

其它方案

adb reverse tcp:8081 tcp:8081

adb reverse tcp:8081 tcp:8081

react-native run-android
复制代码

这样就OK了，其实上面添加assets的方案不知道啥意思，不推荐。

RN调试

利用Chrome来调试：浏览器输入http://localhost:8081/debugger-ui， 而后右键 选择 检查打开调试，看到 console。

连上真机调试。