# React Native筆記1 - 安裝

[官方文檔 - Getting Started](https://facebook.github.io/react-native/docs/getting-started)

可以對照著官方文檔看這份筆記，理論上我只是翻譯了一下，如果有遇到bug再順便記個解決方式這樣xd

在開始以前先簡單簡介一下React Native是什麼：
他是一個Facebook開發的框架，可以用一套程式寫出能同時在ios和android平台跑的手機app(跨平台)，使用的語言是Javascript。

## 安裝Expo CLI
- 安裝[Node.js](https://nodejs.org/en/download/)
- 打開cmd
- 進行Expo CLI的安裝：```npm install -g expo-cli```
- (不知為何會出現一堆警告，但有安裝完成)
- [為何專題選擇Expo CLI而不是React Native CLi](https://stackoverflow.com/questions/54862388/what-is-the-difference-between-expo-cli-and-react-native-cli)
- 初始化你的project(這裡取名為AwesomeProject)：```expo init AwesomeProject```
- template：先選blank就好
- 啟動開發的server：```cd AwesomeProject``` ```npm start```
- 會開一個新的分頁，先放著xd

## 執行React Native應用程式
- 手機安裝Expo程式
- 去Google Play搜尋Expo
- 確認手機和電腦連到同一個wifi
- 手機打開Expo程式，點Scan QR Code來掃描剛才電腦Expo那個分頁的QR code
- 另一種方法：註冊expo帳號，在app登入，也可以看到你的project們
- 做完```npm start```之後按```s```來註冊新帳號

---

### :warning:如果有error
如果你跟我一樣遇到error (qr code掃描完出現 **could not load ..... Network response timed out**)

### 初步解法
第一步：建立**package.json檔案**
- [資料來源](https://ithelp.ithome.com.tw/articles/10191682)
- 執行 ```npm init```
- 要在你的project外面一層的資料夾執行ㄛ
- 例如我的project放在 \charlotte\awesomeproject，那我就要在charlotte跑npm init
- 接下來他會叫你輸入一些欄位，括號內是範例，照著打也可以
- package name: 這個project的名字
- version: 照打
- description: project介紹
- entry point: 打app.js (執行哪個檔案來開啟你的project)
- test command: 直接enter
- git repository: 我是沒有啦，直接enter
- keywords: 直接enter
- author: 作者名稱
- license: 直接enter
- 確認好就輸入yes~ 你的package.json就建立好了

第二步：改成**Tunnel連線**
- 電腦打開你剛才開著的expo分頁，把左下角的連線從LAN改成Tunnel
- 用手機再掃一次QR Code！

這樣應該就成功了，只是因為切換成Tunnel所以下載javascript會變慢，如果有其他解決方式再補充

### 如果還有問題

幾種解法提供參考：
- 你的電腦和手機確定是連到**同一個wifi**？
- 你484一打開expo cli就立刻切tunnel？(我是otz)
- 要等到系統啟動完才可以切！！！應該會**顯示以下三行**
- Starting Metro Bundler on port 19001
Watch mode is not supported in this environment
Tunnel ready
- 一定要等到這三行跑完！！！！ ~~(痛哭~~ 不過有時候會跑蠻久的
- 欸……我也不知道了 可能重開電腦/重開expo/重載expo之類的吧 我幫不了你了qq

---

### :warning: 如果打的東西不會即時變更在手機上
如果你跟我一樣很雖的又遇到bug，發現打的東西不會出現在手機上……

(為了解決這個問題，我來回試了很多個方法，不知道什麼時候就成功了xd)

#### 如果出現的是："cannot connect to Metro server"
在手機打開project以後，閒置過一段時間好像會**自動斷線**，重連看看（把app重新啟動，或是重新```npm start```之類的）應該就好了

#### 如果是別的問題，再試試底下方法

首先，確定一下電腦分頁裡面的 **Production Mode是關著的**
[延伸閱讀 - Development Mode & Production Mode](https://docs.expo.io/versions/latest/workflow/development-mode/)

方法1：修改環境變數 (我覺得不是這個緣故就是了xd)
- 打開電腦的控制台 > 系統及安全性 > 系統 > 進階系統設定 > 環境變數
- 在 **系統變數** 裡面新增你的npm資料夾路徑
- 通常在C:\使用者\使用者名稱\AppData\Roaming\npm，你可能要翻翻看自己的在哪

方法2：開啟動態顯示變更設定 ([資料來源](https://docs.expo.io/versions/v34.0.0/workflow/up-and-running/))

第一步：手機開啟USB Debugging (步驟可能根據不同品牌手機有所不同，我asus的xd)
- 打開手機的設定 > 系統
- 開發人員選項 > 滑到底下，開啟USB偵錯
- 如果沒有"開發人員選項"這個選項：點選關於手機 > 軟體資訊 > 在版本號碼上面點很多次，開發人員選項就會跑出來

第二步：用USB線連接你ㄟ手機和電腦
- 打開expo，搖搖手機應該會出現開發人員選項 (我不知為何搖不出來XD)
- 如果有看到 "**Enable Live Reload**" 就點一下，這樣才會動態顯示變更
- 如果看到 "Disable Live Reload" 那你設定應該沒錯，重啟程式看看有沒有幫助吧 如果還有問題就不是這個的原因xd

---

## 開始開發！

QR code掃描成功以後，就可以用你喜歡的編輯器打開project裡面的App.js 開始編輯拉~

想要在手機上跑跑看你寫的程式，就需要：
- 開電腦cmd，移動到你的專案資料夾 (例如：```cd AwesomeProject```)
- 開啟npm (然後他會一起開expo) ```npm start```
- (跟我一樣遇到上述bug的人) 分頁連線記得改tunnel
- 打開手機expo程式，點開你的project就有嘍~~

[下一篇](https://hackmd.io/@charlo0602/HyYLG-aXL)筆記進教學嘍！

---