如今提起React，已经不是什么新玩意了吧，如果到现在还没有听过React这这个词，那真的是落后了好几条街了。从事前端工作，要经常学习一些新东西，不然很难跟上技术的脚步。这段时间我一直在看React以及React Native，据说好多公司已经开始用React Native了，感觉自己有点亡羊补牢。不说了，总结一下，以下是React Native for iOS的学习小总结。

安装

  1. Node

    Node可前往官网https://nodejs.org/en/下载安装。React Native需要的Node版本是4.0以上，现在官网上面的最新版本v6.x版本是绝对可以满足的。

  2. React Native 命令行工具react-native-cli

    安装Node之后，Node会自带模块管理和发布工具NPM。接下来全局安装React Native命令行工具。

    1
    npm install -g react-native-cli

  3. Xcode

    React Native目前需要Xcode 7.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode IDE和Xcode的命令行工具。

  4. 其他工具

    • Watchman Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。
    • Flow Flow是一个静态的JS类型检查工具。译注：你在很多示例中看到的奇奇怪怪的冒号问号，以及方法参数中像类型一样的写法，都是属于这个flow工具的语法。这一语法并不属于ES标准，只是Facebook自家的代码规范。所以新手可以直接跳过（即不需要安装这一工具，也不建议去费力学习flow相关语法）。

构建React-Native项目

输入以下命令行进行React Native项目构建

1
2
3
4
5
6
7
8

# 初始化项目
react-native init AwesomeProject

# 运行项目
cd AwesomeProject
react-native run-ios

项目结构如图

RN项目结构

或者用Xcode直接打开ios目录下的JelonProject.xcodeproj文件，点击运行即可。
ok，运行成功，如下图所示。

React Native

本地调试

React Native本地调试地址是http://localhost:8081/debugger-ui，可以利用谷歌浏览器进行断点调试，跟Web页面项目的js调试是一样的。

本地调试演示

遇到的问题

不知道，会不会有人也遇到一下问题，导致项目编译失败。

编译失败结果

解决方案：

如果你电脑安装的Xcode版本是8 Beta，把该版本卸载，重新安装了7.3.1就没问题了，具体原因我也不是很清楚，我在中文社区问了，还没得到答案http://bbs.reactnative.cn/topic/1743/react-native%E7%BC%96%E8%AF%91%E5%A4%B1%E8%B4%A5。