安装Homebrew和node.js
- 一台mac
- Xcode 7.2或以上版本
- 安装好Homebrew http://brew.sh/
- 安装Node.js 4.0或更高版本(译注:如果你并不使用Node.js开发网站,只是用于React Native的开发,那么请先安装homebrew,然后直接使用brew install node
安装即可,不必按照下面的nvm的安装步骤),如果你从未接触过npm,推荐阅读npm的文档
$ brew install node
5.在命令行中输入brew install watchman
,我们推荐安装watchman,否则你可能会遇到一个Node.js监视文件系统的BUG。
6.如果你希望使用flow来为js代码加上类型检查,那么在命令行中输入brew install flow
来安装flow。(译注:新手可以跳过这一步)
安装ReactNative
- 安装react-native
$ npm install -g react-native-cli
- 使用从官方服务器下载初始项目(推荐下载完成之后备份一份项目文件,因为下载起来很慢)
$ react-native init ProjectName
- cd到项目根文件,然后运行项目
$ cd ProjectName $ react-native run-ios
- 编辑 ~/ProjectName/index.ios.js 进行开发
配置一个合适的IDE(更新:我最终还是选择了Sublime)
SublimeText配置链接:把SublimeText配置成ReactNative的IDE
查阅了网上很多帖子,大部分使用WebStorm或Atom+Nuclide.其中有几篇帖子说Atom+Nuclide会很卡,但是我自己尝试了之后并没有发现卡顿的问题.反而手感远胜WebStorm(或许是我个人的偏见).并且Nuclide的补全较好,毕竟Nuclide是Facebook官方为ReactNative订制的.
这里就以Atom+Nuclide为例子配置.
- 下载Atom,并且安装
https://atom.io/ - 打开终端,安装nuclide
$ git clone https://github.com/facebook/nuclide.git $ cd nuclide $ npm install $ apm link
- 安装react插件,
apm install react
插件使用技巧:http://orktes.github.io/atom-react/
小贴士,安装了React插件之后,jsx编写xml会有较好的自动补全. - 打开Atom的自动换行:Settings->Soft Wrap
- 使用Atom打开之前的项目: ~/ProjectName
享受Atom+ReactNative吧!
- 使用nuclide开启服务:Cmd+Shift+P, 搜索 Start Packager,开启服务
- 使用终端进行真机测试:
$react-native run-ios $react-native run-android
附:学习ReactNative的一些网站
先看ES6语法变化 http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8
官方文档 http://facebook.github.io/react-native/
React-Native学习指南 https://github.com/ele828/react-native-guide
阮一峰 http://www.ruanyifeng.com/blog/2015/03/react.html
国内更新较为频繁的文章列表 https://segmentfault.com/t/react-native/blogs
知乎日报例子 https://github.com/race604/ZhiHuDaily-React-Native
网友评论
使用终端进行真机测试:
$react-native run-ios $react-native run-android .
这里为什么我的没有这些呢?