前言

本篇文章主要讲解React Native(简称RN)开发环境的搭建，学习这篇文章可能需要开发者要懂AndROId原生开发环境搭建、node环境搭建和mac基本使用。

• 系统：mac
• React Native：0.58

Homebrew

Homebrew是Mac OSX上的软件包管理工具，能在Mac中方便的安装软件或者卸载软件，相当于linux下的apt-get、yum神器。Homebre可以在Mac上安装一些OS X没有的UNIX工具，Homebrew将这些工具统统安装到了 /usr/local/Cellar 目录中，并在 /usr/local/bin 中创建符号链接。Homebrew官网：https://brew.sh/index_zh-cn.html 。

Homebrew的安装

通过以下命令来安装Homebrew。

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

Homebrew的使用

• 安装软件：brew install 软件名，例：brew install wget
• 搜索软件：brew seArch 软件名，例：brew search wget
• 卸载软件：brew uninstall 软件名，例：brew uninstall wget
• 更新所有软件：brew update，通过 update 可以把包信息更新到最新，不过包更新是通过git命令，所以要先通过 brew install git 命令安装git。
• 更新具体软件：brew upgrade 软件名 ，例：brew upgrade git
• 显示已安装软件：brew list
• 查看软件信息：brew info／home 软件名 ，例：brew info git
• 查看那些已安装的程序需要更新： brew outdated
• 显示包依赖：brew reps

安装Node、watchman

我们使用Mac上软件包管理工具安装Node和watchman。

brew install node
brew install watchman

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node.js 的包管理器 npm，是全球最大的开源库生态系统，前端开发人员通过使用npm来管理依赖包。node版本需要在v8.3以上，安装完node后建议科学上网加速项目的搭建过程。

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

安装React Native命令行工具

通过安装react-native-cli命令行工具来生成React Native项目。

npm install -g react-native-cli

Java开发环境

由于Android开发依赖于Java开发环境，所以需要去下载JDK。React Native目前支持Java Development Kit [JDK] 1.8（暂不支持 1.9 及更高版本）。所以建议去官网下载1.8版本的jdk。官网地址： https://www.oracle.com/techne... 。

Android开发环境

由于我是一名Android开发人员，所以在这里简单介绍一下Android开发环境搭建过程，可能下载的开发工具需要翻墙。

Android studio

Android studio是Android官方的开发工具，Android studio下载可以去官网(https://developer.android.com... studio，也可以去AndroidDevTools(https://www.androiddevtools.cn/)，里面有很多不需要翻墙就可以下载的工具。如果你是一名新手，注意安装Android studio的时候，安装界面选择"custom"选项，选择安装一下模块。

• Android SDK
• Android SDK Platform
• PErformance (Intel ® HAXM)
• Android Virtual Device

然后，点击Next即可安装所选择的模块。安装完成后即可看到欢迎页面。

官方教程：https://developer.android.com...

Android SDK

Android Studio默认会安装最新版本的Android SDK。你可以在Android Studio的SDKManager中选择安装各版本的SDK。

然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-tools"选项，确保选中了 React Native 所必须的28.0.3版本。你可以同时安装多个其他版本。

然后点击"Apply"来下载和安装这些组件。

配置Android SDK环境变量

React Native需要通过环境变量来了解你的Android SDK装在什么路径，从而正常进行编译。
Mac上配置环境变量时经常要创建、编辑 .bash_PRofile文件，所以我们需要在.bash_profile中添加Android SDK的环境变量配置。

首先，在命令行中输入命令编辑.bash_profile，vim和vi都是文本编辑器，不了解的可以去http://www.runoob.com/linux/l... 学习一下vim或者vi的使用。

vim/vi  ~/.bash_profile

然后，点击i进行编辑，添加以下配置。

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator

Android Studio官方下载的SDK会放在$HOME/Library/Android/sdk下，如果是自定义下载的Android SDK，则需要更改ANDROID_HOME的值。

然后使用命令来使环境变量设置立即生效。

source $HOME/.bash_profile

创建项目

首先使用之前安装的React Native命令工具来创建一个新工程。

react-native init MyApp

使用Visual studio code打开，目录如下：

然后准备Android设备，在这里可以使用usb连接Android真机，也可以使用Android模拟器，像genymotion、Android Virtual Device。使用真机需要打开开发者模式，并启动usb调试。

准备好设备后，进入到项目根目录中，cd MyApp，然后输入命令行运行程序。

react-native run-android

也可以使用Android Studio直接打开工程根目录下的Android程序，运行即可。

参考：

• React Native官方文档：https://reactnative.cn/docs/g...