React Native開發環境搭建

前言

本篇文章主要講解React Native(簡稱RN)開發環境的搭建，學習這篇文章可能需要開發者要懂Android原生開發環境搭建、node環境搭建和mac基本使用。

• 系統：mac
• React Native：0.58

Homebrew

Homebrew是Mac OSX上的軟件包管理工具，能在Mac中方便的安裝軟件或者卸載軟件，相當於linux下的apt-get、yum神器。Homebre可以在Mac上安裝一些OS X沒有的UNIX工具，Homebrew將這些工具統統安裝到了 /usr/local/Cellar 目錄中，並在 /usr/local/bin 中創建符號鏈接。Homebrew官網：https://brew.sh/index_zh-cn.html 。

Homebrew的安裝

通過以下命令來安裝Homebrew。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Homebrew的使用

• 安裝軟件：brew install 軟件名，例：brew install wget
• 搜索軟件：brew search 軟件名，例：brew search wget
• 卸載軟件：brew uninstall 軟件名，例：brew uninstall wget
• 更新所有軟件：brew update，通過 update 可以把包信息更新到最新，不過包更新是通過git命令，所以要先通過 brew install git 命令安裝git。
• 更新具體軟件：brew upgrade 軟件名 ，例：brew upgrade git
• 顯示已安裝軟件：brew list
• 查看軟件信息：brew info／home 軟件名 ，例：brew info git
• 查看那些已安裝的程序需要更新： brew outdated
• 顯示包依賴：brew reps

安裝Node、watchman

我們使用mac上軟件包管理工具安裝Node和watchman。

brew install node
brew install watchman

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。 Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。 Node.js 的包管理器 npm，是全球最大的開源庫生態系統，前端開發人員通過使用npm來管理依賴包。node版本需要在v8.3以上，安裝完node後建議科學上網加速項目的搭建過程。

Watchman則是由 Facebook 提供的監視文件系統變更的工具。安裝此工具可以提高開發時的性能（packager 可以快速捕捉文件的變化從而實現實時刷新）。

安裝React Native命令行工具

通過安裝react-native-cli命令行工具來生成React Native項目。

npm install -g react-native-cli

Java開發環境

由於Android開發依賴於Java開發環境，所以需要去下載JDK。React Native目前支持Java Development Kit [JDK] 1.8（暫不支持 1.9 及更高版本）。所以建議去官網下載1.8版本的jdk。官網地址： https://www.oracle.com/techne... 。

Android開發環境

由於我是一名Android開發人員，所以在這裏簡單介紹一下Android開發環境搭建過程，可能下載的開發工具需要翻牆。

Android studio

Android studio是Android官方的開發工具，Android studio下載可以去官網(https://developer.android.com... studio，也可以去AndroidDevTools(https://www.androiddevtools.cn/)，裏面有很多不需要翻牆就可以下載的工具。如果你是一名新手，注意安裝Android studio的時候，安裝界面選擇"custom"選項，選擇安裝一下模塊。

• Android SDK
• Android SDK Platform
• Performance (Intel ® HAXM)
• Android Virtual Device

然後，點擊Next即可安裝所選擇的模塊。安裝完成後即可看到歡迎頁面。

官方教程：https://developer.android.com...

Android SDK

Android Studio默認會安裝最新版本的Android SDK。你可以在Android Studio的SDKManager中選擇安裝各版本的SDK。


由於目前編譯 React Native 應用需要的是Android 9 (Pie)版本的 SDK，所以在SDK Manager中選擇"SDK Platforms"選項卡，然後在右下角勾選"Show Package Details"。展開Android 9 (Pie)選項，確保勾選了下面 Android SDK Platform 28 組件（重申你必須使用穩定的翻牆工具，否則可能都看不到這個界面）。

然後點擊"SDK Tools"選項卡，同樣勾中右下角的"Show Package Details"。展開"Android SDK Build-Tools"選項，確保選中了 React Native 所必須的28.0.3版本。你可以同時安裝多個其他版本。

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

配置Android SDK環境變量

React Native需要通過環境變量來了解你的Android SDK裝在什麼路徑，從而正常進行編譯。
Mac上配置環境變量時經常要創建、編輯 .bash_profile文件，所以我們需要在.bash_profile中添加Android SDK的環境變量配置。

首先，在命令行中輸入命令編輯.bash_profile，vim和vi都是文本編輯器，不瞭解的可以去http://www.runoob.com/linux/l... 學習一下vim或者vi的使用。

vim/vi  ~/.bash_profile

然後，點擊i進行編輯，添加以下配置。

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

Android Studio官方下載的SDK會放在$HOME/Library/Android/sdk下，如果是自定義下載的Android SDK，則需要更改ANDROID_HOME的值。

然後使用命令來使環境變量設置立即生效。

source $HOME/.bash_profile

創建項目

首先使用之前安裝的React Native命令工具來創建一個新工程。

react-native init MyApp

使用visual studio code打開，目錄如下：

然後準備Android設備，在這裏可以使用usb連接Android真機，也可以使用Android模擬器，像genymotion、Android Virtual Device。使用真機需要打開開發者模式，並啓動usb調試。

準備好設備後，進入到項目根目錄中，cd MyApp，然後輸入命令行運行程序。

react-native run-android

也可以使用Android Studio直接打開工程根目錄下的Android程序，運行即可。

參考：

• React Native官方文檔：https://reactnative.cn/docs/g...