1.前言
現(xiàn)在前端跨平臺(tái)技術(shù)越來(lái)越流行了,跨平臺(tái)框架也是層出不窮,其中ReactNative (FaceBook出品)、Weex (阿里出品)、Flutter (谷歌出品) 作為大廠出品是目前最受歡迎的幾大跨平臺(tái)框架。
最近自己也在研究學(xué)習(xí)ReactNative,作為一個(gè)跨平臺(tái)框架的新手難免會(huì)遇到各種問(wèn)題,現(xiàn)將遇到的這些問(wèn)題以及解決方案整理記錄一下,方便以后自己以及他人研究參考。
2.常見(jiàn)問(wèn)題
1、React-Native: Could Not find iPhone 6 Simulator
解決方案：
在執(zhí)行npm install之后，打開(kāi)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"
解決方案：
此報(bào)錯(cuò)為數(shù)據(jù)構(gòu)造的問(wèn)題，dataSource 數(shù)據(jù)結(jié)構(gòu)必須如下所示：
var sections = [
{ key: "分類1", data: [{ title: "數(shù)據(jù)1" }, { title: "數(shù)據(jù)1" }, { title: "數(shù)據(jù)1" }] },
{ key: "分類2", data: [{ title: "數(shù)據(jù)2" }, { title: "數(shù)據(jù)2" }, { title: "數(shù)據(jù)2" }] },
];
必須以 key ~ data 的鍵值形式構(gòu)造數(shù)據(jù)源。
3、Unrecognized font family 'Material Icons'
解決方案：
npm install react-native-vector-icons --save
react-native link react-native-vector-icons
4、ReactNative 在 iOS 模擬器上運(yùn)行很慢
解決方案：
在命令行執(zhí)行如下命令：
react-native link
會(huì)出現(xiàn)如下提示：
rnpm-install info Linking react-native-video ios dependency
rnpm-install info iOS module react-native-video has been successfully linked
表示已經(jīng)連接成功,下次運(yùn)行速度會(huì)明顯提升,但是如果報(bào)錯(cuò)的話,將報(bào)錯(cuò)的模塊link一下就可以，執(zhí)行的命令如下：react-native link (模塊名)
例如 react-native link react-native-video
5、Print: Entry, ":CFBundleIdentifier", Does Not Exist
解決方案：
找到ios目錄下的.xcodeproj 工程文件打開(kāi)，手動(dòng)修改BundleIdentifier 配置為可用的BundleID且把工程下含Test的目錄都刪除。
6、'config.h' file not found
解決方案：
在工程目錄下找到如下路徑并執(zhí)行指令：
cd node_modules/react-native/third-party/glog-0.3.4
// 第一步。找到路徑，進(jìn)入glog-0.3.4文件里
../../scripts/ios-configure-glog.sh
// 第2步，執(zhí)行配置腳本。
7、obtain an updated library from the vendor, or disable bitcode for this target
解決方案：
打開(kāi).xcodeproj 工程找到Build Settings配置下的Enable Bitcode 設(shè)置為NO
3.RN框架以及項(xiàng)目實(shí)例
1、CRN
CRN是Ctrip React Native簡(jiǎn)稱，由攜程無(wú)線平臺(tái)研發(fā)團(tuán)隊(duì)基于React Native框架優(yōu)化，定制成穩(wěn)定性和性能更佳、也更適合業(yè)務(wù)場(chǎng)景的的跨平臺(tái)開(kāi)發(fā)框架。
開(kāi)源地址：
https://github.com/ctripcorp/crn
2、beeshell
美團(tuán)開(kāi)源的一個(gè) React Native 應(yīng)用的基礎(chǔ)組件庫(kù)，基于 0.53.3 版本，提供一整套開(kāi)箱即用的高質(zhì)量組件，包含 JS 組件和復(fù)合組件（包含 Native 代碼），涉及 FE、iOS、Android 三端技術(shù)，兼顧通用性和定制化，支持自定義主題，用于開(kāi)發(fā)和服務(wù)企業(yè)級(jí)移動(dòng)應(yīng)用。
開(kāi)源地址：
https://github.com/Meituan-Dianping/beeshell
3、ReactNativeOne
基于React-Native的高仿「ONE·一個(gè)」，兼容Android、iOS雙平臺(tái)（由于接口原因，該代碼庫(kù)不再更新）
開(kāi)源地址：
https://github.com/lipeiwei-szu/ReactNativeOne
4、OneM
OneM是一款純ReactNative打造的集雜志瀏覽、音樂(lè)播放、視頻播放于一體的綜合性App(時(shí)光網(wǎng)+ONE),并且支持iOS和Android雙平臺(tái),并且完美適配iPhoneX與Android機(jī)型。
開(kāi)源地址：
https://github.com/guangqiang-liu/OneM
4.教程資料
《React Native視頻教程-項(xiàng)目實(shí)戰(zhàn)》該套視頻由全棧特級(jí)講師旋之華錄制。
鏈接:
https://pan.baidu.com/s/1yEfCKjxJ4ObIiw9w-Q5uNQ 密碼:14dw
