Mac下搭建react native开发环境

安装必需软件

Homebrew

Homebrew, Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。

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

homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复：

sudo chown -R `whoami` /usr/local

Node

使用Homebrew来安装Node.js.

brew install node

注意有坑：查看安装的node是否最新版本，默认安装的不是最新版本（我以为默认给我了最新（v8.00），其实默认只给我安装了v4.0.0，v4.0.0不支持ES6，当下面用react-native init <Project> 时会报语法错误

解决方法：

1、安装完node后使用命令查看当前版本

node -v

2、然后查看最新版本

npm info node

3、升级node

清除node.js的cache:

sudo npm cache clean -f

安装n工具，n是专门是管理node.js版本的

sudo npm install -g n

安装最新node版本

sudo n stable

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

Android Studio

   

Ios程序员请绕过

Android Studio需要Java Development Kit [JDK] 1.8或更高版本。你可以在命令行中输入 javac -version来查看你当前安装的JDK版本。如果版本不合要求，则可以到官网上下载。

具体安装步骤这里就不详细介绍，网上应该有很多教程。

ANDROID_HOME环境变量

环境变量很重要！要不项目跑不起来。

在终端下使用vi ~/.bash_profile命令创建或编辑。如不熟悉vi操作，请点击这里http://www.eepw.com.cn/article/48018.htm）

然后使用下列命令使其立即生效（否则重启后才生效）：

source ~/.bash_profile

可以使用 echo $ANDROID_HOME检查此变量是否已正确设置。

Xcode

Android程序员请绕过

React Native目前需要Xcode 8.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode IDE和Xcode的命令行工具。虽然一般来说命令行工具都是默认安装了，但你最好还是启动Xcode，并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。

Gradle Daemon

开启Gradle Daemon可以极大地提升java代码的增量编译速度。

touch ~/.gradle/gradle.properties && echo "org.gradle.daemon=true" >> ~/.gradle/gradle.properties

测试安装

react-native init AndroidProject
cd AndroidProject
react-native run-android

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

init命令默认会创建最新的版本，而目前最新需要下载boost库编译。此库体积庞大，在国内即便翻墙也很难下载成功，导致很多人无法正常运行iOS项目，中文网在论坛中提供了这些库的国内下载链接。如果你嫌麻烦，又没有对新版本的需求，那么可以暂时创建0.44.3的版本。

react-native init AndroidIos --verison 0.44.3
cd AndroidIos
react-native run-ios/run-android

运行结果如下：

     

推荐安装的工具

Webstorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

WebStorm属于收费开发工具，但是有一个月的试用时间。（webstorm.2017.1.4网上有破解版本，大家可斟酌下载使用）

配置JSX支持

WebStorm->Preferences->Languaes&Frameworks->JacaScript，然后选择ReactJSX，下载安装react，react native

配置Run Configurations

在菜单栏中找到Edit Configurations

最后选择平台运行项目

参考文档：http://reactnative.cn/docs/0.46/getting-started.html#content