自己真的是買了書就不看書的那種類型，

前端三大王者之 React 跨多螢實戰入門 這本書買了超級久，

最近才又開始翻起來，那就來開始建置 React Native 的開發環境吧～

(謎之音：到底是要拖多久才能開始學習一個新東西？)

 

1. 準備 Android 和 iOS 開發環境

這個部分因為之前有用 Cordova 的關係，

Android Studio 和 Xcode 的環境都已經存在，

所以就不需要再安裝什麼了 (撒花～)

 

2. 安裝 React Native CLI

React Native 開發時，可以使用 Expo CLI 或 React Native CLI，

不過 Expo CLI 產出的 App 要跑在 Expo App 上面，

比較不像是最終 App 成品的模樣，

因此還是直接使用 React Native CLI 吧～

 

在 Mac 上，要先用 Homebrew 安裝好 Node.js 和 watchman。

我的 Node.js 本來就已經存在 (Cordova 也需要使用)，

因此只需要再多裝 watchman：

brew install node
brew install watchman

 

接著，執行 npx react-native init AwesomeProject，

就會在目前目錄下，建立一個名為 AwesomeProject 的專案，

同時也會把 React Native CLI 安裝好：

testuser@localhost ~/ReactNative $ npx react-native init AwesomeProject

Need to install the following packages:
  react-native
Ok to proceed? (y) y

npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
npm WARN deprecated core-js@2.6.12: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

               ######                ######
             ###     ####        ####     ###
            ##          ###    ###          ##
            ##             ####             ##
            ##             ####             ##
            ##           ##    ##           ##
            ##         ###      ###         ##
             ##  ########################  ##
          ######    ###            ###    ######
      ###     ##    ##              ##    ##     ###
   ###         ## ###      ####      ### ##         ###
  ##           ####      ########      ####           ##
 ##             ###     ##########     ###             ##
  ##           ####      ########      ####           ##
   ###         ## ###      ####      ### ##         ###
      ###     ##    ##              ##    ##     ###
          ######    ###            ###    ######
             ##  ########################  ##
            ##         ###      ###         ##
            ##           ##    ##           ##
            ##             ####             ##
            ##             ####             ##
            ##          ###    ###          ##
             ###     ####        ####     ###
               ######                ######


                  Welcome to React Native!
                 Learn once, write anywhere

✔ Downloading template
✔ Copying template
✔ Processing template
ℹ Installing dependencies
? CocoaPods (https://cocoapods.org/) is not installed. CocoaPods is necessary for the iOS project to run correctly. Do you want to install it? Yes, with Homeb
rew
✔ Installing CocoaPods
✔ Installing CocoaPods dependencies (this may take a few minutes)

  Run instructions for iOS:
    • cd "/Users/testuser/ReactNative/AwesomeProject" && npx react-native run-ios
    - or -
    • Open AwesomeProject/ios/AwesomeProject.xcworkspace in Xcode or run "xed -b ios"
    • Hit the Run button

  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd "/Users/testuser/ReactNative/AwesomeProject" && npx react-native run-android

  Run instructions for Windows and macOS:
    • See https://aka.ms/ReactNative for the latest up-to-date instructions.

 

中間會需要 CocoaPods 這個套件，

可以自己選擇要用 Ruby gems 還是 Homebrew 安裝，

我選了 Homebrew，它就自動全部安裝好囉～

 

安裝後的目錄架構如下 (省略了 node_modules 和 ios/Pods 目錄)：

 

3. 執行範例專案

執行 npx react-native run-ios 來執行專案：

testuser@localhost ~/ReactNative/AwesomeProject $ npx react-native run-ios

info Found Xcode workspace "AwesomeProject.xcworkspace"
info Launching iPhone 11 (iOS 14.3)
info Building (using "xcodebuild -workspace AwesomeProject.xcworkspace -configuration Debug -scheme AwesomeProject -destination id=65A7FB47-3797-4A56-9786-4E4725F34CCE")
success Successfully built the app
info Installing "/Users/testuser/Library/Developer/Xcode/DerivedData/AwesomeProject-akobrayahlxgwsdnrcpyavuculef/Build/Products/Debug-iphonesimulator/AwesomeProject.app"
info Launching "org.reactjs.native.example.AwesomeProject"
success Successfully launched the app on the simulator

 

這會開啟一個終端機視窗，

在這視窗裡按 r 的話，會重新整理 App；

按 d 的話，會開啟開發者工具選單 (不過我按了沒用)：

 

另一個開出來的就是 iOS 的模擬器視窗，

這裡可以看到我們的範例 App 已經跑起來了，

在這邊按 Cmd-R 也可以重新整理：

 

Cmd-D 可以開啟開發者工具 (這邊按有效)，

不過如果失效的話，我得在終端機那邊按 r 重整，

再回到模擬器視窗按 Cmd-D 才能再叫出來，不知道是不是 bug：

 

先不管這個範例在做什麼 (← 很隨便)，

總之第一個 Hello World 程式已經跑起來了，

接下來總算可以開始入門寫程式啦～