简易配置一个顺手的ReactNative开发环境

1630 查看

安装Homebrew和node.js

  1. 一台mac
  2. Xcode 7.2或以上版本
  3. 安装好Homebrew http://brew.sh/
  4. 安装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

  1. 安装react-native
    $ npm install -g react-native-cli
  2. 使用从官方服务器下载初始项目(推荐下载完成之后备份一份项目文件,因为下载起来很慢)
    $ react-native init ProjectName
  3. cd到项目根文件,然后运行项目
    $ cd ProjectName $ react-native run-ios
  4. 编辑 ~/ProjectName/index.ios.js 进行开发

配置一个合适的IDE(更新:我最终还是选择了Sublime)

SublimeText配置链接:把SublimeText配置成ReactNative的IDE



查阅了网上很多帖子,大部分使用WebStorm或Atom+Nuclide.其中有几篇帖子说Atom+Nuclide会很卡,但是我自己尝试了之后并没有发现卡顿的问题.反而手感远胜WebStorm(或许是我个人的偏见).并且Nuclide的补全较好,毕竟Nuclide是Facebook官方为ReactNative订制的.
这里就以Atom+Nuclide为例子配置.

  1. 下载Atom,并且安装
    https://atom.io/
  2. 打开终端,安装nuclide
    $ git clone https://github.com/facebook/nuclide.git $ cd nuclide $ npm install $ apm link
  3. 安装react插件,
    apm install react
    插件使用技巧:http://orktes.github.io/atom-react/
    小贴士,安装了React插件之后,jsx编写xml会有较好的自动补全.
  4. 打开Atom的自动换行:Settings->Soft Wrap
  5. 使用Atom打开之前的项目: ~/ProjectName

享受Atom+ReactNative吧!

  1. 使用nuclide开启服务:Cmd+Shift+P, 搜索 Start Packager,开启服务
  2. 使用终端进行真机测试:
    $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