了解React Native

React Native使你能夠在Javascript和React的基礎(chǔ)上獲得完全一致的開發(fā)體驗(yàn)，構(gòu)建世界一流的原生APP。React Native著力于提高多平臺開發(fā)的開發(fā)效率 —— 僅需學(xué)習(xí)一次，編寫任何平臺。(Learn once, write anywhere)。Facebook已經(jīng)在多項(xiàng)產(chǎn)品中使用了React Native，并且將持續(xù)地投入建設(shè)React Native。

搭建React Native 環(huán)境

關(guān)于安裝React Native的說明可以查看React Native官方文檔（http://facebook.github.io/react-native/） 官方網(wǎng)站會提供最新的安裝參考。 ? ? ?

首先說明下以后的技術(shù)分享均以Mac OS X系統(tǒng)為基礎(chǔ)（首先你先準(zhǔn)備一臺Mac），以為我是一個(gè)地道的iOS開發(fā)者，也是一名果粉，廢話不多說，進(jìn)入正題你將會用到 Homebrew ?一個(gè)OS ?X系統(tǒng)的通用包管理工具，用來安裝 React Native的相關(guān)依賴。如果你有一臺mac，那么現(xiàn)在就可以同時(shí)開發(fā)iOS 和Android應(yīng)用。

1.1 安裝Homebrew

打開 Homebrew ? 根據(jù)提示安裝。

打開終端，打入命令

安裝好Homebrew 之后，運(yùn)行以下命（比較耗時(shí)時(shí)）：
brew install node
brew install watchman
brew install flow

React Native 包管理器同時(shí)使用了node和watchman ，如果在今后的開發(fā)過程中遇到問題，建議你更新這些依賴。flow是Facebook公司出品的一個(gè)類型檢查庫，它同樣被React Native所采用。 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 如果安裝過程中遇到問題，你可能需要更新brew 和相關(guān)依賴包 使用的命令行： brew update ? ? brew upgrade
如果出現(xiàn)錯(cuò)誤，你需要修復(fù)本地的brew 安裝程序，brew ?doctor 可以幫助你找到問題所在。

1.2 安裝React Native

經(jīng)過上面漫長的等待你已經(jīng)安裝好了node ,我們接下來 就可以通過npm(Node 包管理器)來安裝React Native 的命令工具:
我們通過NPM安裝反應(yīng)母語-CLI的命令行工具。在MAC終端中輸入如下命令，其中-g表示全局安裝。

npm install -g react-native-cli

這個(gè)步驟將會在你的系統(tǒng)全局安裝React Native命令行工具。

2.1 開發(fā)環(huán)境搭建（iOS- 安裝Xcode）

為了開發(fā)和發(fā)布iOS應(yīng)用，你需要注冊一個(gè)iOS開發(fā)者賬號，開發(fā)者賬號分為兩種：個(gè)人（99美刀/年）? 企業(yè)（299美刀/年），用于后期開發(fā)完項(xiàng)目部署到iOS應(yīng)用商店。

(1).你需要在你的mac上面安裝Xcode，? 它包含了Xocde 集成開發(fā)環(huán)境。iOS模擬器以及iOS SDK (軟件開發(fā)工具包)。你可以從應(yīng)用商店或Xcode 網(wǎng)站(下載地址?) 下載。

Xcode 網(wǎng)站下載

Xcode 安裝成功，接下來配置Android依賴。

2.2開發(fā)環(huán)境搭建（Android）

Android 依賴的安裝步驟比較多，先推薦看下一下官方文檔（https://facebook.github.io/react-native/docs/android-setup.html?）里面有安裝說明，需要注意的是，這些安裝都是假設(shè)你從來都沒有安裝過Android 開發(fā)環(huán)境。

第一步：安裝SDK。
第二步：安裝模擬器。
第三步：創(chuàng)建模擬器。

首先，你需要安裝SDK(Java開發(fā)工具包) 和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配置文件中正確導(dǎo)出 ANDROID_HOME 環(huán)境變量 (~/.bashrc? 、 ~/.zshrc 或其他shell)。

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

Mac 下的安卓配置環(huán)境變量
(1). 找到安卓的安裝路徑，我們在通過終端命令安裝的時(shí)候，在安裝成功之后有一個(gè)我們的安裝路徑，我們可以直接獲取到 如圖(3).1
(2). 在終端輸入命令.進(jìn)入用戶目錄? ? $cd ~
(3). 然后輸入命令，該命令的作用是如果不存在.bash_profile文件，則創(chuàng)建該文件? ? $touch .bash_profile
(4).然后輸入命令，該命令的作用是用文本編輯器TextEdit打開.bash_profile文件。如果你是第一次配置環(huán)境變量，則該文檔應(yīng)該是空的。
$open -e .bash_profile? ? ? 將export ANDROID_HOME=/usr/local/opt/android-sdk?? 添加到文件中。

圖(3).1

許多Android 相關(guān)的開發(fā)任務(wù)都使用這個(gè)環(huán)境變量。需要確保添加環(huán)境變量之后執(zhí)行source 命令使得配置可以立即生效。

接下來可以在終端執(zhí)行 android 命令，從而打開Android SDK 管理器，選擇 紅色區(qū)域勾選的 如圖? (3).2 進(jìn)行安裝。

(3).2

安裝會話費(fèi)一些時(shí)間，接下來，我們先安裝模擬器 和相關(guān)的工具，
啟動一個(gè)新的 終端頁面。輸入命令：android 啟動Android SDK管理器，我們再次安裝 Intel x86 Emulator Accelerator(HAXM installer) 如圖(3).3 點(diǎn)擊install 1 package。

圖(3).3

這些依賴包 使我們供我們創(chuàng)建Android虛擬設(shè)備(Android Virtual Device ，AVDs)或者模擬器 ，我們現(xiàn)在還未創(chuàng)建任何模擬器，我們接下來創(chuàng)建它，運(yùn)行以下命令android avd
啟動AVD 管理器 如圖(3).4

圖(3).4

會彈出一個(gè)創(chuàng)建界面 如圖(3).5?

圖(3).5

點(diǎn)擊Create 填寫創(chuàng)建模擬器的相關(guān)信息 如圖(3).6

圖(3).6

我們在這里選的 CPU/ABI 是 arm64-v8a的架構(gòu)。Target 選擇的是Android 7.0-API? 再次之前安裝環(huán)境比較慢， 只安裝了Android 7.0API、Android 7.1API ，我們先創(chuàng)建7.0的 ，
重要的事情說三遍，確保已經(jīng)勾選了Use Host GPU ,否則模擬器非常慢，確保已經(jīng)勾選了Use Host GPU ,否則模擬器非常慢，確保已經(jīng)勾選了Use Host GPU ,否則模擬器非常慢。
填寫完信息信息，接下來啟動我們的Android模擬器 ，是不是非常激動，沒做過安卓的是不是感覺好神奇，如圖(3).7

圖(3).7

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

圖(3).8

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

到此為止React Native 環(huán)境搭建完畢，有不懂的可以給我留言，希望能夠幫到大家，我也是邊學(xué)邊寫一些技術(shù)博客，分享給大家。
我將會在下一篇：創(chuàng)建第一個(gè)RN應(yīng)用。

作者：百事小武
鏈接：https://www.jianshu.com/p/95137688897a
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

總結(jié)

以上是生活随笔為你收集整理的1、RN跨平台开发——环境搭建的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。