react native使用過程問題總結

本文react native問題根據個人經驗總結，可能有不準確的地方

1.版本支持度

問題：android端支持到android4.1, ios支持到ios7.0

解決：如需支持更低版本，可修改源碼，資料較少，困難度較大，不推薦。或者采用降級處理，對于低版本采用H5頁面來支持，這一方案被采用更多

2.listview內存占用

問題：react native 內存占用較高，對內存的回收不如原生好

解決：有幾個解決思路

• 使用官方recycleview,一定程度降低內存占用

• 避免無限長列表的使用場景

• 使用社區方案，手動控制內存釋放，這樣可以控制住內存的增量。社區方案推薦sglistview

3.react native webview js bridge

問題：react native 官方的webview支持注入js，但是不支持weview調用react native中的方法，沒法做到雙向通信

解決：社區提供了react-native-js-bridge

4.react naitive background timer

問題：react native官方沒提供app在后臺時，持續運行的機制

解決：社區提供了react-native-background-timer

5.react native 分辨率適配

問題：在布局中寫的尺寸，react native不會自動根據設備調整

解決：布局時，涉及尺寸的地方，使用工具方法轉換

6.react native cookie使用

問題：react native官方缺少對cookie的使用的介紹

解決：社區提供了react-native-cookies組件，使用時，需要注意ios和android端差異。或者盡量避免直接使用cookie,可以通過自定義header解決

7.react native fetch blob

問題：使用fetch api獲取blob對象，js端獲取到的filesize為0

解決：社區提供了rnfetchblob組件

8.react native fetch upload file

問題：使用formdata上傳文件時，ios,android有差異

解決：ios端，formdata中使用base64,android使用filepath

9.react native webview css支持度

問題：react native android weview不支持css height 100%

解決：避免在網頁中使用這樣樣式，不能避免的，通過往webview注入js，改變目標元素的樣式值

10:react native webview 單頁應用

問題：單頁應用內，場景跳轉時，hashchange沒計入history，回退時不能依次回退

解決：手動記錄訪問歷史，控制回退

11：react native webview 錯誤處理機制

問題：react native webview在頁面渲染出錯時，未提供自定義錯誤渲染邏輯，并終止事件傳播的邏輯

解決：需修改官方webview源碼

12：react native webview私有協議支持不完善

問題：到0.35版本，react native ios webview 加載有私有協議喚起其他app的頁面時候，先渲染出來原頁面，后跳轉到默認失敗界面，原因是無法解析私有協議地址；

安卓端自0.31版本重寫了shouldOverrideUrlLoading方法，私有協議調起外部app時，如果用戶沒有安裝該app，代碼中沒有捕獲異常，導致crash

解決：對iOS端，在js中實現onShouldStartLoadWithRequest方法處理私有協議；對Android端，可以修改官方的ReactWebViewManager，使用try/catch包裹問題代碼。

 

 

來自：http://www.jianshu.com/p/de78ab59b5e8