當React開發者初次走進React-Native的世界

  • 2019 年 10 月 3 日
  • 筆記

RN千機變

1.技術體系問題

RN和React共用一套抽象層，相對於前端，RN其實更接近Node的運行環境

ReactNative =React +IOS +Android

看RN文檔時，我會發現入門基礎那一塊介紹的都是React的內容，進階篇則介紹了很多IOS和Android的API

2.組件設計問題

Android和IOS一些設計組件是不共通的，這意味著，原本在React上只返回一個組件的情況下，RN中你可能需要判斷平台分別返回兩個版本的組件，為什麼要這樣？ 因為對於許多組件，兩個平台的風格差異實在太大，只能分而治之。

3.靜態資源問題

RN應用和普通Web應用有一些天生的差別，RN應用是可以植入預定的靜態資源的，也就是不需要經過任何一次請求，而都可以本地使用的靜態資源，而Web應用試圖使用這種資源則需要經過至少一次的網路請求並且快取，但仍有可能被用戶強清快取等操作付之一炬。

這意味著，做性能優化時也許可以從靜態資源入手了，我閱讀了以下文章後 探索 react native 首屏渲染最佳實踐

學習到了可以通過靜態文件占點陣圖優化RN首屏的新思路。當然，很多時候React和RN的優化思路也是共通的，例如

  • 資源預先快取
  • 長列表延遲載入等等

4.標籤生效問題

  • <div>不能用啦，要用<view>
  • <p>標籤用不了啦,要用<Text>
  • 沒有<img>了，取而代之的是<Image>
  • 背景，可以用ImageBackground這個組件
  • 列表，不能用ul/li啦，用ListView組件吧兄弟
  • 各種Input，不能用input標籤啦～ 要用對應的原生控制項，比如TextInput、Picker、Switch、Slider

5.事件核心問題

Web開發中，點擊事件是核心，而在主攻移動端的RN中，觸摸事件的地位則大大增強，而且除此之外，還衍生了長按事件（JS中我記得只有雙擊事件沒有長按事件）

  • onPressOut等等
  • onLongPress 等等

6.CSS3屬性受限，動畫效果使用方式完全變更

CSS/Animation我用不了了，因為CSS已經沒了了，底層是用bridge調原生的UI構建

7.虛擬DOM到虛擬View的演變

在React中，我們使用虛擬DOM模擬現實中的DOM節點

在RN中，這個對象被換成了虛擬View,對應原生平台中的視圖，因為RN中已經沒有DOM了

8.UI呈現的變化

（以下參考自： http://blog.ilibrary.me/2016/12/25/react-native-internal）

UI的描述和呈現分離開了。

  1. html文本描述了頁面應該有哪些功能，css告訴瀏覽器該長什麼樣。
  2. 瀏覽器引擎通過解析html和css，翻譯成一些列的預定義UI控制項，
  3. 然後UI控制項去調用作業系統繪圖指令去繪製影像展現給用戶。
  4. Javascript可有可無，主要用於html裡面一些用戶事件響應，DOM操作、非同步網路請求和一些簡單的計算。

在react native 裡面，1和2是不變的，也是用html語言描述頁面有哪些功能，然後stylesheet告訴瀏覽器引擎每個控制項應該長什麼樣。並且和瀏覽器用的是同一個引擎。
在步驟3裡面UI控制項不再是瀏覽器內置的控制項，而是react native自己實現的一套UI控制項（兩套，android一套，ios一套），這個切換是在MessageQueque中進行的，並且還可以發現，他們tag也是不一樣的。參考鏈接：http://blog.ilibrary.me/2016/12/25/react-native-internal

 

RN大觀園

  1. IOS9只支援https，以http載入網路圖片資源是無效的
  2. React-native內置babel轉換器和ES6的polypill
  3. RN使用的引擎是safari的引擎而我們一般調試的時候用的是Chrome的V8引擎
  4. 遇到頻繁修改屬性的場景，為了避免影響性能，建議使用setNativeProp直接修改屬性，而不是走setState的流程
  5. 測試元素和包裹容器的距離，在普通場景中我們可能會考慮scrolltop，offsetTop等一堆屬性，在RN中可以通過一個方法，叫measure和measureLayOut，能分別測以某個元素為參考點的相對位置和絕對位置
  6. RN相對於普通web應用，增加了一個屬性叫hsl，可以指定：色度-飽和度-亮度，是不是感覺和rgba很類似的作用呀
  7. 如果訪問的一些API，但是RN平台暫時沒有做封裝，就需要自己用Object-C或者Android實現
  8. 資料庫： RN是移動端應用，那不就意味著可以用Android等的資料庫或者文件系統了嗎？ 在RN中這似乎被封裝成了AsyncStroage,如果覺得API還不能滿足的話，可以用社區里的一個高性能的RN庫——realm
  9. 後台任務可以很方便的用了，就像web-worker一樣
  10. 編寫跨平台程式碼時候，RN專門提供了Platform對
  11. Plaform.OS: 返回平台名稱，比如iOS或者android
  • Plaform.Version: 返回版本
  • Plaform.select: 方法，接收一個對象，可以分別指定ios和android環境下的返回值，酌情返回

     12.導航有提供專門的模組：比如react-navigation和react-native-navigation

     13.動畫要用Animated控制項，不能自己寫CSS3的動畫屬性了，比如Animation和transition

VirMach 便宜 VPS

QNews

QNews