react-native开发Android环境详细配置（mac）

1.mac自带ruby，可输入ruby --version查看版本

2.安装Homebrew

（1）使用命令：ruby-e"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

（2）检查是否安装成功：brew -v

3.安装nodejs，具体安装步骤请看：node安装配置

（1）检查node版本：node -v

（2）装完node会自动有npm，检查npm版本：npm -v

4.安装watchman和flow

（1）安装watchman：brew install watchman

（2）安装flow：brew install flow

（3）定期更新brew：brew update 或者 brew upgrade（开发周期内，最好一天一次）

5.安装Xcode

（1）可直接在app store 中下载（文件较小）

（2）也可网页下载，查找xcode下载（文件较大）

6.安装Android环境

（1）Java环境搭建：

一、下载并安装jdk

jdk下载地址

二、配置java环境变量  

①输入$ /usr/libexec/java_home来定位java在mac中的安装路径

②在命令行中输入：$touch ~/.bash_profile（touch命令是若文件不存在，创建该文件）

③在命令行中输入：$open~/.bash_profile(open用编辑器打开该文件）

④把第一步查找到到java安装路径赋值给JAVA_HOME，复制以下内容到 .bash_profile文件中：

export JAVA_HOME=查找到的java安装路径

export PATH=$JAVA_HOME/bin:$PATH                                  

export CLASS_PATH=$JAVA_HOME/lib:$CLASS_PATH

⑤在命令行中输入：$source~/.bash_profile(source命令是执行文件）

⑥验证环境变量是否成功：在命令行输入      $java 或$javac（若提示命令找不到表示失败）

或输入      $echo$JAVA_HOME（是否能成功打印java的安装路径）

三、Android studio安装

Android studio 下载地址   安装参考

Android studio 安装成功

新版的Android studio mac 会安装最新版本的Android sdk

Android studio创建新项目

写好项目名称后，进入上面的界面，这个页面支持你适配TV、Wear等，我们只选择第一项就ok，选好默认SDK然后”Next”

这里我们选择empty activity即可

创建成功后的页面

四、Android sdk安装

由于安装的sdk是最新的安卓系统，所以为了开发兼容旧的安卓系统，我们还是需要安装sdk

打开Android studio ，点击mac顶部的preference，出现下面界面，

按照开发需要选择勾需要的Android系统选项

五、Android sdk环境变量配置

①与设置Java一样，打开 .bash_profile文件

②打开android studio，打开preference，点击如下图可以查看android sdk对安装路径

③把上步找到的sdk的安装路径赋值给ANDROID_HOME，并复制以下内容到 .bash_profile中

export ANDROID_HOME=查找到到sdk路径

export  PATH=${PATH}:${ANDROID_HOME}/tools

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

④在命令行中输入：

$source ~/.bash_profile

在命令行中输入：

$adb

（验证android sdk环境变量是否设置成功）

sdk配置成功

7.安装安卓模拟器（本案例选择MuMu模拟器）

①模拟器下载地址

②使用安卓模拟器创建一个 Android 的虚拟设备 (AVD)

③运行 android avd 并且点击 Create...

④选定该新的 AVD, 并且点击 Start...

一

二点击create

三点击new

四然后一直next到finish

①值得一提的是，"Keyboard"选项勾选后可以用计算机键盘输入到AVD中，但此时运行的AVD中不会启动Android中的输入法，取消勾选则会启动Android中的输入法，而无法用键盘输入，设置好后点击"Finish"结束

②启动AVD，按经验第一步打开AVD管理器，可以看到刚才新建的AVD，点击"Actions"下的绿色箭头按钮就可以启动AVD了

8.项目开发

①npm install -g react-native-cli 是完成剩余安装的命令行工具。它是通过npm安装的。这将会在你的终端里面安装 react-native这个命令行

②react-native init AndroidProject这一条命令获取 React Native 的源代码和依赖包

③$cd AndroidProject   

④$react-native run-android