React Native 新手起步教學 + 常見問題 [2021]

幾年前過學一下React Native，然後因為其他項目的原因而暫停了學習，對於一個網頁開發者而言，可用Javascript來開發接近原生的應用程式當然十分吸引。

這次重新學習的過程中我也對比過學習ReactJS 直接用webapp 打包還是react native，最終結論是後者會有更好的效果，因為對我而言Javascript本來也只是個「使用者」而不是「開發者」，ReactJS 本來就是0接觸，兩者對我而言都是從新開始，所以最終選擇了大家說運作效率會更好的React Native。

幾年前與現在相比，重新入坑反而與到更多問題？ 其中一個原因是我用了M1來開發，但最終很多時候自己看漏官方／插件作者的簡介

另一大問題就是以前沒有 CocoaPods! 這個問題在重新入坑時花了我不少時間，也是M1 遇到的其中一個問題

以下簡單說一下流程，我是以Mac OS來試玩的，分別在iMac 跟 M1 Macbook Air，所以花了較多的時間讓兩邊同時有效

1. 安裝 homebrew (https://brew.sh/)

在你的terminal （終端機 ）運作此行生裝 （2021-4-6 ： M1已經在3月時可直接安裝了）

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. 安裝完成homebrew，就可使用brew 來安裝yarn  nodejs 等

brew install node

brew install yarn

brew install watchman

3. 安裝cocoapods

sudo gem install cocoapods

------ 直到現在，環境系統已安裝完成了 ------
ps1： 建議用 vscode，較多人使用，插件也多，M1版已成熟
ps2： 如果你未安裝xcode，請打開app store 搜尋xcode 並安裝

4. 決定好文件想放什麼位置，因為我經常性會用terminal來操作，而cd 的預設位置就是使用者目錄(即：/Users/Your_username)，所以我會放在/Users/Your_username/RN/,

決定好目錄就安裝react-native吧！

cd 
cd RN/
npx react-native init app01

5. 系統會提示你運行 yarn react-native run-ios，但此時你需要先把pod相關文件安裝一次

進入ios目錄

cd ios/

安裝

pod install

安裝完成後，返回app的主目錄

cd ../

運作

yarn ios

以上步驟其實可一次性執行運作

cd ios/ && pod install && cd ../ && yarn ios

5.5  如果你是M1 CPU, 那以上的第5步就需要特別處理

第一件事：修改此文件：/app01/ios/Podfile，把下面的幾行刪除／加上#

use_flipper!()
  post_install do |installer|
    react_native_post_install(installer)
  end

這樣做會把flipper相關的套件都關了，我暫時是初步試用，未知flipper相關套件用途大不大，網上還有其他解決辦法，但我試了暫時全部都不能解決，暫時唯一令他在M1 上運作到的方法就是這樣

第二件事： 請把terminal以 Rosetta打開並執行上面的pod 安裝

如果你做了第5步才看到5.5 步，請把/app01/ios/Pods/整個目錄刪了再執行 cd ios/ && pod install && cd ../ && yarn ios

 

以上是我在近期重新試用react-native會預到的問題，希望對各位能有些微幫助。

ref：

解決pod m1 參考：https://www.youtube.com/watch?v=UrxM1SyAXAE

pod m1 其他解決方法，但我試了仍不成功： https://stackoverflow.com/questions/66019068/event2-event-config-h-file-not-found/66071245#66071245

官方以外的Terminal推薦：https://iterm2.com/