如今提起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
# 初始化项目
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