幾年前過學一下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

2. 安裝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 ~/RN/
npx react-native init app01

5. 運作及安裝pod

系統會提示你運行 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

React Native 新手起步教學 + 常見問題 [2021] 1
這樣做會把flipper相關的套件都關了,我暫時是初步試用,未知flipper相關套件用途大不大,網上還有其他解決辦法,但我試了暫時全部都不能解決,暫時唯一令他在M1 上運作到的方法就是這樣

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

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

如果你做了第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/