搭建Node(Reactnative)开发环境

搭建react native开发环境

平台 macos,目标平台: ios

---

安装

1. homebrew

homebrew, mac的包管理器，用于安装nodejs和一些其他必需的工具软件。

/usr/bin/ruby -e "$(curl -fssl https://raw.githubusercontent.com/homebrew/install/master/install)"

2. node

很多教程推荐使用brew,但是许多人又反应后期项目同步用的node不一样
所以我建议直接官网下载,并保留安装包

https://nodejs.org/zh-cn/

3.国内镜像加速

安装完node后建议设置npm镜像以加速后面的过程（或使用*工具）。注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

4.yarn、react native的命令行工具（react-native-cli）

yarn是facebook提供的替代npm的工具，可以加速node模块的下载。react native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

npm install -g yarn react-native-cli

安装完yarn后同理也要设置镜像源：

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

如果你看到eacces: permission denied这样的权限报错，那么请参照上文的homebrew译注，修复/usr/local目录的所有权：

sudo chown -r `whoami` /usr/local

5.xcode

appstore直接下载安装

6. watchman

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

brew install watchman

7. flow

flow是一个静态的js类型检查工具。译注：你在很多示例中看到的奇奇怪怪的冒号问号，以及方法参数中像类型一样的写法，都是属于这个flow工具的语法。这一语法并不属于es标准，只是facebook自家的代码规范。所以新手可以直接跳过（即不需要安装这一工具，也不建议去费力学习flow相关语法）。

brew install flow

测试安装

react-native init awesomeproject
cd awesomeproject
react-native run-ios

提示：你可以使用–version参数创建指定版本的项目。例如react-native init myapp –version 0.39.2。注意版本号必须精确到两个小数点。

或者双击ios/awesomeproject.xcodeproj文件然后在xcode中点击run按钮。

修改项目

现在你已经成功运行了项目，我们可以开始尝试动手改一改了：

使用你喜欢的编辑器打开index.ios.js并随便改上几行。 在ios emulator中按下?-r就可以刷新app并看到你的最新修改！