react-native初体验

本文主要记录自己在学习使用react-native过程中遇到的一些问题和解决方法。重点写自己遇到的坑。目标平台：mac  ios开发，调试：模拟器，真机。

1、搭建开发环境

 https://facebook.github.io/react-native/docs/getting-started.html  （英文教程）

https://reactnative.cn/docs/0.51/getting-started.html  （中文教程网址）

有两种常见的方式来设置React Native开发环境：create-react-native-app和react-native-cli。

1、create-react-native-app

     是由 Facebook 与 Expo 联合开发的用于快速创建 React Native 应用的工具，只需要手机端安装Expo应用，电脑端运行以下几个命令就可以快速搭建一个RN项目。运行npm strart后，命令行那里会生成一个二维码，开发者在手机端用已经安装好的Expo扫描二维码即可预览页面效果。

npm install -g create-react-native-app
create-react-native-app AwesomeProject
cd AwesomeProject
npm start

如果不需要用到原生模块，这种方式相对快速方便。当然，如果需要用到到原生模块的时候，也可以运行 npm run eject 来将其恢复为类似于 react-native init 创建的包含原生代码的初始化项目，这样就能够自由地添加原生模块。

2、react-native-cli

安装依赖，需要安装node、Watchman,  React Native的命令行工具以及 Xcode.

1、安装Homebrew，mac系统的包管理器。

2、安装node，watchman（Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新））

 brew install node
 brew install watchman

3、通过Appstore安装xcode，React Native目前需要Xcode 8.0 或更高版本。虽然一般来说命令行工具都是默认安装了，但你最好还是启动Xcode，并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。

4、安装React Native的命令行工具

npm install -g react-native-cli

5、初始化一个项目

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios（这是运行你的应用程序的一种方式，你也可以在xcode中直接启动）

坑来了： 小女纸按照步骤一步一步安装完成，结果打开模拟器报错“no bundle url present”，傻眼了。

度娘搜索“no bundle url present”，出来很多搜索结果和解决办法，具体尝试过的有以下这些办法和链接，贴出来供后来者参考：

1、改代理。（参考链接）

2、删除build文件夹，多次运行命令。（npm install react-native run-ios）

3、AppDelegate.m更改文件里面的jsCodeLocation。（参考链接）