1、RN跨平台开发——环境搭建

了解React Native

React Native使你能够在Javascript和React的基础上获得完全一致的开发体验，构建世界一流的原生APP。React Native着力于提高多平台开发的开发效率 —— 仅需学习一次，编写任何平台。(Learn once, write anywhere)。Facebook已经在多项产品中使用了React Native，并且将持续地投入建设React Native。

搭建React Native 环境

关于安装React Native的说明可以查看React Native官方文档（http://facebook.github.io/react-native/）官方网站会提供最新的安装参考。

首先说明下以后的技术分享均以Mac OS X系统为基础（首先你先准备一台Mac），以为我是一个地道的iOS开发者，也是一名果粉，废话不多说，进入正题你将会用到 Homebrew 一个OS X系统的通用包管理工具，用来安装 React Native的相关依赖。如果你有一台mac，那么现在就可以同时开发iOS 和Android应用。

1.1 安装Homebrew

打开 Homebrew 根据提示安装。

打开终端，打入命令

安装好Homebrew 之后，运行以下命（比较耗时时）：
brew install node
brew install watchman
brew install flow

React Native 包管理器同时使用了node和watchman ，如果在今后的开发过程中遇到问题，建议你更新这些依赖。flow是Facebook公司出品的一个类型检查库，它同样被React Native所采用。如果安装过程中遇到问题，你可能需要更新brew 和相关依赖包使用的命令行： brew update brew upgrade
如果出现错误，你需要修复本地的brew 安装程序，brew doctor 可以帮助你找到问题所在。

1.2 安装React Native

经过上面漫长的等待你已经安装好了node ,我们接下来就可以通过npm(Node 包管理器)来安装React Native 的命令工具:
我们通过NPM安装反应母语-CLI的命令行工具。在MAC终端中输入如下命令，其中-g表示全局安装。

npm install -g react-native-cli

这个步骤将会在你的系统全局安装React Native命令行工具。

2.1 开发环境搭建（iOS- 安装Xcode）

为了开发和发布iOS应用，你需要注册一个iOS开发者账号，开发者账号分为两种：个人（99美刀/年）企业（299美刀/年），用于后期开发完项目部署到iOS应用商店。

(1).你需要在你的mac上面安装Xcode，它包含了Xocde 集成开发环境。iOS模拟器以及iOS SDK (软件开发工具包)。你可以从应用商店或Xcode 网站(下载地址 ) 下载。

Xcode 网站下载

Xcode 安装成功，接下来配置Android依赖。

2.2开发环境搭建（Android）

Android 依赖的安装步骤比较多，先推荐看下一下官方文档（https://facebook.github.io/react-native/docs/android-setup.html ）里面有安装说明，需要注意的是，这些安装都是假设你从来都没有安装过Android 开发环境。

第一步：安装SDK。
第二步：安装模拟器。
第三步：创建模拟器。

首先，你需要安装SDK(Java开发工具包) 和Android SDK。
(1) 安装最新版本的JDK 下载地址：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 如图：2.2（1）

图：2.2（1）

(2) 通过终端命令：brew install android-sdk 安装Android SDK。如图：2.2(2)

图：2.2(2)

(3) 在shell配置文件中正确导出 ANDROID_HOME 环境变量 (~/.bashrc 、 ~/.zshrc 或其他shell)。

export ANDROID_HOME=/usr/local/opt/android-sdk

Mac 下的安卓配置环境变量
(1). 找到安卓的安装路径，我们在通过终端命令安装的时候，在安装成功之后有一个我们的安装路径，我们可以直接获取到如图(3).1
(2). 在终端输入命令.进入用户目录 $cd ~
(3). 然后输入命令，该命令的作用是如果不存在.bash_profile文件，则创建该文件 $touch .bash_profile
(4).然后输入命令，该命令的作用是用文本编辑器TextEdit打开.bash_profile文件。如果你是第一次配置环境变量，则该文档应该是空的。
$open -e .bash_profile 将export ANDROID_HOME=/usr/local/opt/android-sdk 添加到文件中。

图(3).1

许多Android 相关的开发任务都使用这个环境变量。需要确保添加环境变量之后执行source 命令使得配置可以立即生效。

接下来可以在终端执行 android 命令，从而打开Android SDK 管理器，选择红色区域勾选的如图 (3).2 进行安装。

(3).2

安装会话费一些时间，接下来，我们先安装模拟器和相关的工具，
启动一个新的终端页面。输入命令：android 启动Android SDK管理器，我们再次安装 Intel x86 Emulator Accelerator(HAXM installer) 如图(3).3 点击install 1 package。

图(3).3

这些依赖包使我们供我们创建Android虚拟设备(Android Virtual Device ，AVDs)或者模拟器，我们现在还未创建任何模拟器，我们接下来创建它，运行以下命令android avd
启动AVD 管理器如图(3).4

图(3).4

会弹出一个创建界面如图(3).5

图(3).5

点击Create 填写创建模拟器的相关信息如图(3).6

图(3).6

我们在这里选的 CPU/ABI 是 arm64-v8a的架构。Target 选择的是Android 7.0-API 再次之前安装环境比较慢，只安装了Android 7.0API、Android 7.1API ，我们先创建7.0的，
重要的事情说三遍，确保已经勾选了Use Host GPU ,否则模拟器非常慢，确保已经勾选了Use Host GPU ,否则模拟器非常慢，确保已经勾选了Use Host GPU ,否则模拟器非常慢。
填写完信息信息，接下来启动我们的Android模拟器，是不是非常激动，没做过安卓的是不是感觉好神奇，如图(3).7