# React.js與React Native(RN)：從WEB到APP的轉換心得整理

###### tags: `React` `React Native` `智慧型手機` `行動版開發` `語法`

- [前端框架與React的簡介資源](https://hackmd.io/@BOBYZH/B1xoUGw9F)
- [從純JS過渡到React的話，可以參考這邊較詳細的整理](https://hackmd.io/@BOBYZH/H1JqsfYg9)

## React邏輯在Native的改寫對應

- html elements -> components
- 不一定有直接對應，可能須找替代寫法
- 多用flex達成類似RWD的要求
- 如網頁從標籤引入套件的作法不可行
- RN元素嵌套的結構可比WEB簡略少包幾層
- css -> styles
- 多數語法可通用，只是拼寫從kebab轉Camel
- 例外：沒有對應參數甚至選項時，得找其他方法，如RN中'position不能用"static"'、'boxShadow'整個不存在
- 分離式寫法(mixin)，可讓margin、padding等仿造css不分上下左右一起設定
- 有些web css在rn styles不需要或效果不同，需人工檢視修改
- js -> 看情況，但往往不能直接套用
- 可沿用原React架構寫，但須注意class/function寫法差異
- 對WEB DOM的操作得找替代方案(取得/修改元素資訊，如取高寬度、替換內容)
- RN版本支援的套件可對應替換
- 但雙版本的功能選項(如API)，可能RN比WEB少，需額外用styles改或調整設計規格，如antd
- 畫面切換：route/link -> navigation

- 除錯(Debug) -> 電腦額外套件或手機搖動選單
- 開啟遠端Debug結果APP當掉得重編譯？
- 編譯(Compile) -> Android和iOS效果不一，需二邊都檢查
- 寫在RN以求完整，但只在一邊起作用，如safeArea避免在iOS瀏海顯示，Android則會自動排除此問題
- 針對特定平台的額外寫法(Android/iOS資料夾內修改)

### 其他React轉換討論(中文部分)
參考連結：
https://larrykkk.medium.com/
https://juejin.cn/post/6844903568877551623
https://ithelp.ithome.com.tw/users/20142011/ironman/4880
https://ithelp.ithome.com.tw/articles/10236579?sc=rss.iron

### 從網頁版轉到原生應用開發的心得
- 整體而言RN限制較WEB多，開發原生應用沒有網頁自由
- 或是因為開發者的經驗不夠？
- 若要同時開發Android & iOS二大平台，理論上需要使用Mac(因為iOS APP需要macOS才能編譯)，
- 其他開發平台(Windows/Linux)預設只能編譯Android版(除非去搞虛擬機)，且對iOS版效果不同的部分無法及時調整
- 也可考慮將APP原始碼上傳到Appetize.io，透過WEB產生iOS版本的預覽
- 跑RN server硬體負擔不小，加上同時Android & iOS模擬器電腦可能跑不動，用真機相對可減輕效能負荷
- 但使用模擬器仍有不可取代的優勢，例如模擬特定硬體規格，如切換螢幕尺寸來測試畫面
- 或者：嘗試先寫RN，再編譯成WEB的可能？