幫自己挖一個新的坑。
自我檢測
- 我知道 React Native 跟 React 的差別
- 我知道怎麼建立 React Native 的開發環境
- 我知道怎麼操作 Android 和 IOS 的虛擬機
- 我知道 Expo 跟 React CLI 的差別是什麼
- 我知道 React Native 其實就是在寫 Native（且知道原理）
什麼是 React Native
跟 React 一樣是個從 Facebook 開源出來的框架，但 React 是針對「Web」，React Native 則是針對「App」為主。
簡單來說，React Native 就是讓你用「很像在寫 React」的方式來寫 App，只要你對 React 有一定程度的理解，要上手這個東西就不需要很大的學習成本。
Expo 與 React Native CLI
在建立 React Native 的開發環境時，會面臨兩個選擇：
- React Native CLI
- Expo CLI
這兩者最大的差別在於「前者會需要碰原生的 Code，而後者只有純粹的 JavaScript」。
所以優劣勢也很明顯，碰原生的 Code 意味者你能做更多的事情（畢竟是直接用原生來寫），像是直接跟 Native API 溝通之類的，但如果是 Expo 這種幫你包裝好的框架，你只能用它提供給你的東西來做事情，所以就會被侷限在一個範圍內。
如果妳是像我這種第一次入門的人，可以先選擇 Expo 來當作練習。等之後摸熟後想做更多事情時，再跳去 React Native CLI 應該也是 OK 的。
環境建置
安裝 Expo：
1 | sudo npm install -g expo-cli |
安裝 Android Studio（虛擬機）
安裝完以後，首先確認「SDK Platforms」和「SDK Tools」是否有安裝正確：
- 打開 Android Studio
- 選擇首頁下方的「More Actions」，點選「SDK Manager」
- SDK Platforms 應該會顯示最新版本的 API 項目被打勾，SDK Tools 則會顯示「Android Emulator」、「Android SDK Platform-Tools」和「Inter x86 Emulator Accelerator」被打勾。
如果有沒打勾的部分，就把他勾起來重新安裝就好。
接下來是 Mac 的部分要再設定環境變數，這部分請直接參考 Expo 官方文件，基本上只要複製貼上就好了。
接著要來建立「虛擬機」，這時會要你選擇「機種」跟「作業系統」。如果沒特別偏好的話，基本上選新的版本跟機型就好，不要在這邊選擇障礙太久！
安裝 Xcode（虛擬機）
去 App stote 下載，打開 Xcode 後設定 preferences：location > Command Line Tools 選取最新的 Xcode 版本。
接著就可以打開模擬器了：Open Developer Tool > Simulator
如果要改機型的話，切到虛擬機的視窗：File open simulator 就有跳出很多選項了。
在虛擬機上打開 developer menu 的方法
Command + M可以在 Andriod 打開 DevtoolCommand + D可以在 IOS 打開 Devtool- 實體手機的話請「搖晃幾下」，他就會自己彈出來了。
推薦裝的 vs code 套件
只是個補充，如果你有需要的話可以參考以下幾個：
- React Native Tools
- React Native/React/Redux Snippet
開啟專案
以上都建立好以後，只要透過 Terminal 執行：
1 | npm start # expo start |
就會跳出 expo 的訊息跟主控台，裡面告訴你要怎麼跟 Android 和 IOS 做連結，照著做就沒問題了。
順道一提，如果你是用「實體手機」來跟專案做連結的話，請務必記得先安裝 Expo Go，並確保手機跟電腦「連的是同一個網路」，不然的話就會失敗。（這個跟內網 / 外網的概念有關）
以上就是基本的環境建置，希望接下來的時間我可以跟 React Native 慢慢混熟 ~