了解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

圖(3).7

下面就馬上出現神器的模擬器界面如 圖(3).8，咱們的RN環境搭建也馬上進入尾聲了。

圖(3).8

如果愿意的話，你可以創建多個AVD，Android設備種類繁多，有不同的屏幕尺寸，分辨率和功能，因此使用不同的模擬器通常能為測試帶來幫助。當然我們前期以學習為目的，就先安裝一個。

到此為止React Native 環境搭建完畢，有不懂的可以給我留言，希望能夠幫到大家，我也是邊學邊寫一些技術博客，分享給大家。
我將會在下一篇：創建第一個RN應用。