react-native 開荒記(一) 開發環境的搭建

環境搭建

安裝依賴

所用平臺: macOS 故文章內容基於macOS平臺進行，官方最新react-native 0.58版本

目標平臺所需安裝的依賴不一樣

1.當目標平臺爲ios時
  必須安裝的依賴有：Node、Watchman 和 React Native 命令行工具以及 Xcode(蘋果公司目前只容許在Mac電腦上開發iOS應用。若是你沒有Mac，那麼只能考慮使用沙盒環境，或者去開發Android應用)。
2.當目標平臺爲Android時
  必須安裝的依賴有：Node、Watchman 和 React Native 命令行工具以及 JDK 和 Android Studio(雖然你可使用任何編輯器來開發應用（編寫 js 代碼），但你仍然必須安裝 Android Studio 來得到編譯 Android 應用所需的工具和環境)。

如下爲官方教程安裝

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

ios

Xcode
React Native 目前須要Xcode 9.4 或更高版本。你能夠經過 App Store 或是到Apple 開發者官網上下載。這一步驟會同時安裝 Xcode IDE、Xcode 的命令行工具和 iOS 模擬器。

Xcode 的命令行工具
啓動 Xcode，並在Xcode | Preferences | Locations菜單中檢查一下是否裝有某個版本的Command Line Tools。Xcode 的命令行工具中包含一些必須的工具，好比git等。

Android

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

2.安裝 Android SDK
  Android Studio 默認會安裝最新版本的 Android SDK。目前編譯 React Native 應用須要的是Android 9 (Pie)版本的 SDK（注意 SDK 版本不等於終端系統版本，RN 目前支持 android4.1 以上設備）。你能夠在 Android Studio 的 SDK Manager 中選擇安裝各版本的 SDK。
  SDK Manager 還能夠在 Android Studio 的"Preferences"菜單中找到。具體路徑是Appearance & Behavior → System Settings → Android SDK。
  在 SDK Manager 中選擇"SDK Platforms"選項卡，而後在右下角勾選"Show Package Details"。展開Android 9 (Pie)選項，選中。
而後點擊"SDK Tools"選項卡，一樣勾中右下角的"Show Package Details"。展開"Android SDK Build-Tools"選項，確保選中了 React Native 所必須的28.0.3版本。（你能夠同時安裝多個其餘版本）。

最後點擊"Apply"來下載和安裝這些組件。

3.配置 ANDROID_HOME 環境變量
React Native 須要經過環境變量來了解你的 Android SDK 裝在什麼路徑，從而正常進行編譯。

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

注：~表示用戶目錄，即/Users/你的用戶名/，而小數點開頭的文件在 Finder 中是隱藏的，而且這個文件有可能並不存在。可在終端下使用vi ~/.bash_profile命令建立或編輯。（vim基本命令 輸入i 退出輸入esc 命令模式:wq 保存退出）。

若是你不是經過Android Studio安裝的sdk，則其路徑可能不一樣，請自行肯定清楚。

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 等其餘，請使用對應的配置文件。

使用source $HOME/.bash_profile命令來使環境變量設置當即生效（不然重啓後才生效）。可使用echo $ANDROID_HOME檢查此變量是否已正確設置。

請確保你正常指定了 Android SDK 路徑。你能夠在 Android Studio 的"Preferences"菜單中查看 SDK 的真實路徑，具體是Appearance & Behavior → System Settings → Android SDK。

建立新項目

react-native init TestProject

可使用--version 建立指定版本的項目。例如react-native init TestProject --version 0.57.3。注意版本號必須精確到兩個小數點

運行你剛建立的項目

  以Android爲例,用Android Studio打開項目下的android文件，點擊虛擬機圖標運行虛擬機，固然也可使用真機或者其餘，在這裏省事用了Android Studio自帶的虛擬機，實際中我推薦使用其餘。

以後執行

cd TestProject
react-native run-android

當看到

恭喜你已經運行了第一個 React Native 應用。

筆者環境版本 react-native@0.58 node@8.11.3 watchman@4.9.0 react-native-cli@2.0.1 Xcode@10.1 javac@1.8.0_201 yarn@1.13.0