《React Native》Mac IOS开发环境搭建

 

1、安装Xcode

在AppStore搜索安装Xcode，安装完成后打开Xcode自动初始化。

 

2、安装Nodejs

在node官网下载node，下载完后默认安装即可，点击前往下载node

 

3、安装Java

在Java官网下载Java，下载完后默认安装即可，点击前往下载Java

点击同意然后下载安装。

 

4、安装WebStorm

在WebStorm官网下载WebStorm，下载完后默认安装即可，点击前往下载WebStorm

 

 

5、安装Homebrew

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

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

译注：在Max OS X 10.11（El Capitan)版本中，homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复：

sudo chown -R `whoami` /usr/local

 

 

6、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

安装完yarn之后就可以用yarn代替npm了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install --save 某第三方库名。

 

7、Android Studio

React Native目前需要Android Studio2.0或更高版本。

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

Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。

除非特别注明，请不要改动安装过程中的选项。比如Android Studio默认安装了 Android Support Repository，而这也是React Native必须的（否则在react-native run-android时会报appcompat-v7包找不到的错误）。

安装过程中有一些需要改动的选项：

• 选择Custom选项：

• 勾选Performance和Android Virtual Device

 

• 安装完成后，在Android Studio的启动欢迎界面中选择Configure | SDK Manager。

 

• 在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。

 

• 在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（必须是这个版本）。然后还要勾选最底部的Android Support Repository.

 

8、ANDROID_HOME环境变量

确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。具体的做法是把下面的命令加入到~/.bash_profile文件中：(译注：~表示用户目录，即/Users/你的用户名/，而小数点开头的文件在Finder中是隐藏的，并且这个文件有可能并不存在。请在终端下使用vi ~/.bash_profile命令创建或编辑。如不熟悉vi操作，请点击这里学习）。如果你的命令行不是bash，而是例如zsh等其他，请使用对应的配置文件。

如果你不是通过Android Studio安装的sdk，则其路径可能不同，请自行确定清楚。

export ANDROID_HOME=~/Library/Android/sdk

将Android SDK的Tools目录添加到PATH变量中

你可以把Android SDK的tools和platform-tools目录添加到PATH变量中，以便在终端中运行一些Android工具，例如android avd或是adb logcat等。具体做法仍然是在~/.bash_profile中添加：

export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

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

source ~/.bash_profile

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

 

9、推荐安装的工具

Watchman

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。译注：此工具官方虽然是推荐安装，但在实践中，我们认为此工具是必须安装，否则可能无法正常开发。

brew install watchman

 

10、测试安装

打开WebStorm，按照http://idea.lanyus.com/方法，获取注册码激活WebStorm

 

 

激活后， 一直点击下一步默认配置，然后点击Create New Project

 

点击Create创建第一个项目 ，如图

 

 

第一个项目创建好后，在终端执行以下命令：

Android(需要自行打开模拟器)

react-native run-android

 IOS

react-native run-ios

 

 

到这里，你已经成功创建并运行了你的第一个React Native应用 ！

参考：

React Native 中文网

React Native官网