react native android开发环境搭建（mac系统）

开头

经过几天的折腾，终于在mac上把react native android的开发环境搭建完毕，以前一直用到是windows，对mac非常对不熟悉，在搭建过程中遇到了各种拦路虎，所以把搭建过程总结下来，能帮助自己，也能帮助大家。

java环境搭建

android app是用java语言开发的

• 下载JDK（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开发环境搭建

android studio安装
android studio是开发android的官方IDE，android studio下载地址，我下载的是集成（android sdk）的版本，下载后安装。

android sdk下载
android sdk是开发android的开发工具包。
打开android studio，

android.png

点击下面这个按钮，进入android sdk manager界面

android manager.png

下载以下资源：

• Android SDK Build-tools version 23.0.1
• Android 6.0 (API 23)
• Android Support Repository

Paste_Image.png

Paste_Image.png

android sdk环境变量设置

• 参照设置java环境变量打开 .bash_profile的步骤

• 打开android studio，在菜单栏点击SDK Manager

  
  
  

  sdk manager图标
  
  

  可以查看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环境变量是否设置成功）

react native环境搭建

安装nvm, node.js, watchman, flow

安装Homebrew
官方推荐使用Homebrew来安装nvm, nodejs, watchman, flow。Homebrew是一个包资源管理器，在mac上可以用了安装软件，卸装软件，查找软件。

安装nvm
nvm是node.js的版本管理器，可以用nvm来安装node.js

   $brew install nvm

安装node.js

node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统

第一种方法

   $nvm install node
   $nvm alias default node

第二种方法
直接在官网上下载nodejs安装包，node.js下载地址

安装watchman，flow

Watchman 是 facebook 的一个开源项目，它开源用来监视文件并且记录文件的改动情况，当文件变更它可以触发一些操作,例如执行一些命令等等

Flow：Facebook 的 JavaScript 静态类型检查器 点击了解flow更多

    $brew install watchman
    $brew install flow

安装React-native-cli

React-native-cli是用来开发react native到命令行工具（比如后面用到的react－native命令）

  $npm install -g react-native-cli

npm是安装成功node.js后到包管理器

小结
到此整个环境搭建完成，剩下我们创建例子

创建react native android工程

下面命令初始化一个工程，AwesomeProject是工程的名字，需要等待一段时间，因为需要从网络下载资源。
$react-native init AwesomeProject

AwesomeProject初始化成功后，下面命令启动该工程，前提是模拟器或手机已经连接电脑

    $cd AwesomeProject
    $react-native run-android

网上有些例子会提示先启动packager服务，react-native run-android发现packager服务没启动，会启动packager服务，所以没必要专门启动packager服务。

结束

在mac上搭建react native android开发环境到此结束，希望能帮到您。

本人微信：704451290

本人公众账号