【技術】ReactNative問題整理

1.前言

現在前端跨平臺技術越來越流行了,跨平臺框架也是層出不窮,其中ReactNative (FaceBook出品)、Weex (阿里出品)、Flutter (谷歌出品) 作爲大廠出品是目前最受歡迎的幾大跨平臺框架。

最近自己也在研究學習ReactNative,作爲一個跨平臺框架的新手難免會遇到各種問題,現將遇到的這些問題以及解決方案整理記錄一下,方便以後自己以及他人研究參考。

2.常見問題

1、React-Native: Could Not find iPhone 6 Simulator

解決方案：
在執行npm install之後，打開node_modules/react-native/local-cli/runiOS/findMatchingSimulator.js 文件,分別定位到第30、36行,將這兩行的代碼替換爲如下代碼：

 //第30行代碼替換
 if (!version.includes('iOS')) {
       continue;
   }

 //第36行代碼替換
 if (simulator.isAvailable !== true) {
     continue;
  }

2、SectionList "TypeError: Cannot read property 'length' of undefined"

解決方案：
此報錯爲數據構造的問題，dataSource 數據結構必須如下所示：

 var sections = [
      { key: "分類1", data: [{ title: "數據1" }, { title: "數據1" }, { title: "數據1" }] },
      { key: "分類2", data: [{ title: "數據2" }, { title: "數據2" }, { title: "數據2" }] }, 
    ];

必須以 key ~ data 的鍵值形式構造數據源。

3、Unrecognized font family 'Material Icons'

解決方案：

npm install react-native-vector-icons --save
react-native link react-native-vector-icons 

4、ReactNative 在 iOS 模擬器上運行很慢

解決方案：

在命令行執行如下命令：
react-native link

會出現如下提示：
rnpm-install info Linking react-native-video ios dependency
rnpm-install info iOS module react-native-video has been successfully linked

表示已經連接成功,下次運行速度會明顯提升,但是如果報錯的話,將報錯的模塊link一下就可以，執行的命令如下：react-native link (模塊名)

例如 react-native link react-native-video

5、Print: Entry, ":CFBundleIdentifier", Does Not Exist

解決方案：
找到ios目錄下的.xcodeproj 工程文件打開，手動修改BundleIdentifier 配置爲可用的BundleID且把工程下含Test的目錄都刪除。

6、'config.h' file not found
解決方案：
在工程目錄下找到如下路徑並執行指令：

cd node_modules/react-native/third-party/glog-0.3.4
//  第一步。找到路徑，進入glog-0.3.4文件裏

../../scripts/ios-configure-glog.sh
//  第2步，執行配置腳本。

7、obtain an updated library from the vendor, or disable bitcode for this target

解決方案：
打開.xcodeproj 工程找到Build Settings配置下的Enable Bitcode 設置爲NO

3.RN框架以及項目實例

1、CRN
CRN是Ctrip React Native簡稱，由攜程無線平臺研發團隊基於React Native框架優化，定製成穩定性和性能更佳、也更適合業務場景的的跨平臺開發框架。

開源地址：
https://github.com/ctripcorp/crn

2、beeshell
美團開源的一個 React Native 應用的基礎組件庫，基於 0.53.3 版本，提供一整套開箱即用的高質量組件，包含 JS 組件和複合組件（包含 Native 代碼），涉及 FE、iOS、Android 三端技術，兼顧通用性和定製化，支持自定義主題，用於開發和服務企業級移動應用。

開源地址：
https://github.com/Meituan-Dianping/beeshell

3、ReactNativeOne
基於React-Native的高仿「ONE·一個」，兼容Android、iOS雙平臺（由於接口原因，該代碼庫不再更新）

開源地址：
https://github.com/lipeiwei-szu/ReactNativeOne

4、OneM
OneM是一款純ReactNative打造的集雜誌瀏覽、音樂播放、視頻播放於一體的綜合性App(時光網+ONE),並且支持iOS和Android雙平臺,並且完美適配iPhoneX與Android機型。

開源地址：
https://github.com/guangqiang-liu/OneM

4.教程資料

《React Native視頻教程-項目實戰》該套視頻由全棧特級講師旋之華錄製。

鏈接:
https://pan.baidu.com/s/1yEfCKjxJ4ObIiw9w-Q5uNQ 密碼:14dw