react native 環境搭建的問題總結覆盤

前言

本文首發於作者的公衆號——小貓沒有魚。
第一次學習使用react native開發，但搭建react native的開發環境的過程並不太順利，大概花了五六個小時，中途遇到不少問題，現趁熱總結覆盤。

React Native是編寫原生移動應用的框架，它可以讓前端開發者直接使用 React 來創建 Android 和 iOS 的原生應用，因此對於前端開發人員來說學習成本是比較低的。
本次開發筆者擬採用react native + typeScript的技術棧。環境搭建過程中選取的開發環境是macOS，目標平臺是Android。

搭建步驟

一、安裝Node、watchman

brew install node
brew install watchman

說明：

1. node版本需在v12以上。
2. Watchman是由 Facebook 提供的監視文件系統變更的工具，RN官網推薦安裝，否則可能會遇到Node.js監視文件系統的BUG。
3. 要想使用brew命令，請確保電腦已安裝HomeBrew，HomeBrew是用來在 Mac OS X 安裝 Linux 工具包的包管理器，需要注意的是HomeBrew官網提供的安裝命令不適合國內用戶，可以網上尋找國內的鏡像源或者科學上網工具。

二、安裝JDK（Java Development Kit）

React Native 需要 Java Development Kit [JDK] 1.8，暫不支持 1.9 及更高版本，官網推薦使用HomeBrew安裝，給出的命令是：

brew cask install adoptopenjdk/openjdk/adoptopenjdk8

但是報錯了，遇到第一個坑——

我按照提示改成以下命令便成功了——

brew install cask adoptopenjdk/openjdk/adoptopenjdk8

安裝好後可使用javac -version查看JDK版本。

三、搭建android開發環境

在搭建前需注意——國內用戶必須必須必須有穩定的科學上網工具。

1、首先去官網下載android studio，體積較大，下載需要一段時間https://developer.android.google.cn/studio/

2、安裝 Android SDK
打開Android studio，在右下角選擇Configure->SDK manager，然後右下角選擇Show Package Details，顯示詳細信息。

在"SDK Platforms"選項卡中選擇Android 10 (Q)下面的Android SDK Platform 29 和 Intel x86 Atom_64 System Image，這是官網當下推薦的Android 版本，具體版本會隨着時間變換，請關注RN官網最新推薦版本，筆者當時選擇的是Android 9.0 (Pie)的版本。

3、安裝SDK tools

• 在"SDK Tools"選項卡，選擇右下角的"Show Package Details"
• 展開"Android SDK Build-Tools"選項，選中了 React Native 所必須的29.0.2版本
• 展開"NDK (Side by side)"選項，選擇20.1.5948944版本
• 點擊apply開始安裝
  
  4、安裝android虛擬機
  你可以選擇在Configure->AVD manager查看是否有虛擬設備，方便開發時使用虛擬機調試，沒有的話可以選擇Create Virtual Device創建一個你的虛擬設備，創建時選擇默認配置就好。
  
  
  5、配置 ANDROID_HOME 環境變量
  筆者的shell命令是bash，依次執行如下命令
  
  
  
  
  
  
  

## 沒有.bash_profile會創建.bash_profile文件
touch ~/.bash_profile 

## 打開.bash_profile
open ~/.bash_profile 

## 複製粘貼這段配置
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

## 使環境變量設置立即生效（否則重啓後才生效）
source $HOME/.bash_profile

之後可以使用echo $ANDROID_HOME檢查是否正確設置。

四、創建項目

執行如下命令：

npx react-native init MyProjectName --template react-native-template-typescript

因爲筆者想在項目中使用TS，因此在創建項目時使用了typescript模版，如果不需要，也可以直接使用命令：

npx react-native init MyProjectName

從這裏開始，原以爲勝利在望，但後面遇到了兩個大坑，大概60%的時間都用在這後面的步驟。

坑1：Xcode問題
執行上面的命令後，遇到如下報錯，Failed to install CocoaPods dependencies for iOS project, which is required by this template.

後來筆者也按照下一行的提示執行cd ./AwesomeTSProject/ios && pod install，執行後也報錯。
網上這種問題的回答大多是說因爲安裝了兩個版本Xcode，或者路徑錯誤。但是筆者嘗試帖子中的方法許久也並未解決問題。

筆者發現電腦中並未沒有Xcode。。。筆者之前沒有接觸過iOS開發，不瞭解Xcode。後來百度到Xcode 是運行在操作系統Mac OS X上的集成開發工具（IDE），是開發 macOS 和 iOS 應用程序的最快捷的方式。之前從一個教程中看到說mac電腦自帶Xcode，RN官網選擇目標平臺爲Android時，也沒有Xcode相關步驟，幾番操作後才考慮到是否是電腦沒有Xcode，後來發現確實如此。。。

後來開始安裝Xcode，（這個IDE體積好大。。11G左右吧，下載安裝的過程至少20分鐘左右），安裝好後，CocoaPods dependencies 安裝失敗的問題解決了。不過筆者不太明白RN目標平臺選擇的Android，爲什麼也需要安裝iOS的環境，也許RN項目必須要支持iOS吧（一個遺留問題）。

坑2: 時間等待問題
安裝好xcode後，再執行創建項目的命令就成功創建項目了。

按照提示，iOS啓動執行——

cd "/Users/admin/Documents/my/AwesomeTSProject" && npx react-native run-ios

Android啓動執行——

cd "/Users/admin/Documents/my/AwesomeTSProject" && npx react-native run-android

筆者執行Android的啓動命令時，在彈出的終端中很長一段時間一直顯示如下狀態：

warn No apps connected. 仔細閱讀後面英文，筆者以爲項目啓動安卓虛擬機失敗，是不是虛擬機安裝失敗或者路徑配置錯誤，檢查了很久，也沒有發現問題，在android studio中也能正常啓動虛擬機，但每次用RN 的android命令啓動項目，依舊一直停在上面的狀態，百思不得其解。
不知道多少次嘗試後，筆者發現並不是項目啓動不了android的虛擬機，而是這個過程需要等很久，終端中的warn No apps connected警告有一定迷惑性，耐心等待，等進程執行結束其實是能夠正常啓動的，這個烏龍有點無語。

最後，React Native 環境終於搭好了

筆者是北漂職場菜鳥，正在學習成長的路上，文中有不當之處，歡迎指正，同時歡迎關注筆者的公衆號——小貓沒有魚，一起學習進步。