摘要：的命令行工具啟動(dòng)，并在菜單中檢查一下是否裝有某個(gè)版本的。的命令行工具中包含一些必須的工具，比如等。

所用平臺(tái): macOS 故文章內(nèi)容基于macOS平臺(tái)進(jìn)行，官方最新react-native 0.58版本

1.當(dāng)目標(biāo)平臺(tái)為ios時(shí)
??必須安裝的依賴有：Node、Watchman 和 React Native 命令行工具以及 Xcode(蘋果公司目前只允許在Mac電腦上開(kāi)發(fā)iOS應(yīng)用。如果你沒(méi)有Mac，那么只能考慮使用沙盒環(huán)境，或者去開(kāi)發(fā)Android應(yīng)用)。
2.當(dāng)目標(biāo)平臺(tái)為Android時(shí)
??必須安裝的依賴有：Node、Watchman 和 React Native 命令行工具以及 JDK 和 Android Studio(雖然你可以使用任何編輯器來(lái)開(kāi)發(fā)應(yīng)用（編寫 js 代碼），但你仍然必須安裝 Android Studio 來(lái)獲得編譯 Android 應(yīng)用所需的工具和環(huán)境)。

以下為官方教程安裝

brew install node
brew install watchman
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
npm install -g yarn react-native-cli
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

注：官方推薦使用brew和yarn

Xcode
React Native 目前需要Xcode 9.4 或更高版本。你可以通過(guò) App Store 或是到Apple 開(kāi)發(fā)者官網(wǎng)上下載。這一步驟會(huì)同時(shí)安裝 Xcode IDE、Xcode 的命令行工具和 iOS 模擬器。

Xcode 的命令行工具
啟動(dòng) Xcode，并在Xcode | Preferences | Locations菜單中檢查一下是否裝有某個(gè)版本的Command Line Tools。Xcode 的命令行工具中包含一些必須的工具，比如git等。

1.安裝 Java Development Kit和Android Studio
??首先下載和安裝 Java Development Kit和Android Studio，這個(gè)就自行百度吧（這版React Native 需要 Java Development Kit [JDK] 1.8）。

2.安裝 Android SDK
??Android Studio 默認(rèn)會(huì)安裝最新版本的 Android SDK。目前編譯 React Native 應(yīng)用需要的是Android 9 (Pie)版本的 SDK（注意 SDK 版本不等于終端系統(tǒng)版本，RN 目前支持 android4.1 以上設(shè)備）。你可以在 Android Studio 的 SDK Manager 中選擇安裝各版本的 SDK。
??SDK Manager 還可以在 Android Studio 的"Preferences"菜單中找到。具體路徑是Appearance & Behavior → System Settings → Android SDK。
??在 SDK Manager 中選擇"SDK Platforms"選項(xiàng)卡，然后在右下角勾選"Show Package Details"。展開(kāi)Android 9 (Pie)選項(xiàng)，選中。
然后點(diǎn)擊"SDK Tools"選項(xiàng)卡，同樣勾中右下角的"Show Package Details"。展開(kāi)"Android SDK Build-Tools"選項(xiàng)，確保選中了 React Native 所必須的28.0.3版本。（你可以同時(shí)安裝多個(gè)其他版本）。

最后點(diǎn)擊"Apply"來(lái)下載和安裝這些組件。

3.配置 ANDROID_HOME 環(huán)境變量
React Native 需要通過(guò)環(huán)境變量來(lái)了解你的 Android SDK 裝在什么路徑，從而正常進(jìn)行編譯。

具體的做法是把下面的命令加入到~/.bash_profile文件中：

注：~表示用戶目錄，即/Users/你的用戶名/，而小數(shù)點(diǎn)開(kāi)頭的文件在 Finder 中是隱藏的，并且這個(gè)文件有可能并不存在?？稍诮K端下使用vi ~/.bash_profile命令創(chuàng)建或編輯。（vim基本命令 輸入i 退出輸入esc 命令模式:wq 保存退出）。

如果你不是通過(guò)Android Studio安裝的sdk，則其路徑可能不同，請(qǐng)自行確定清楚。

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator`

如果你的命令行不是 bash，而是例如 zsh 等其他，請(qǐng)使用對(duì)應(yīng)的配置文件。

使用source $HOME/.bash_profile命令來(lái)使環(huán)境變量設(shè)置立即生效（否則重啟后才生效）?？梢允褂胑cho $ANDROID_HOME檢查此變量是否已正確設(shè)置。

請(qǐng)確保你正常指定了 Android SDK 路徑。你可以在 Android Studio 的"Preferences"菜單中查看 SDK 的真實(shí)路徑，具體是Appearance & Behavior → System Settings → Android SDK。

react-native init TestProject

可以使用--version 創(chuàng)建指定版本的項(xiàng)目。例如react-native init TestProject --version 0.57.3。注意版本號(hào)必須精確到兩個(gè)小數(shù)點(diǎn)

??以Android為例,用Android Studio打開(kāi)項(xiàng)目下的android文件，點(diǎn)擊虛擬機(jī)圖標(biāo)運(yùn)行虛擬機(jī)，當(dāng)然也可以使用真機(jī)或者其他，在這里省事用了Android Studio自帶的虛擬機(jī)，實(shí)際中我推薦使用其他。

之后執(zhí)行

cd TestProject
react-native run-android

當(dāng)看到

恭喜你已經(jīng)運(yùn)行了第一個(gè) React Native 應(yīng)用。

筆者環(huán)境版本 [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]_201 [email protected]