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 環境終于搭好了

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