原生開(kāi)發(fā)的主項(xiàng)目中的某個(gè)模塊馏谨，計(jì)劃用RN來(lái)實(shí)現(xiàn)。由于首次集成RN到項(xiàng)目中踩官，遇到諸多問(wèn)題钾怔，故小記如下：
1碱呼、利用子模塊來(lái)包含RN項(xiàng)目依賴(lài)的類(lèi)庫(kù)
主項(xiàng)目代碼利用gitlab來(lái)管理，集成RN模塊宗侦，考慮到之后會(huì)有其他模塊使用RN實(shí)現(xiàn)愚臀，可能存在多個(gè)RN項(xiàng)目使用共同類(lèi)庫(kù)，故計(jì)劃將RN項(xiàng)目依賴(lài)使用的類(lèi)庫(kù)矾利，也當(dāng)作一個(gè)組件姑裂，放在gitlab來(lái)管理馋袜，iOS 工程和 Android 工程分別依賴(lài)這個(gè)子模塊的方式來(lái)包含。
//子模塊目錄
_ XQRNComponent
//忽略文件
└── .gitignore
//管理項(xiàng)目的依賴(lài)項(xiàng)以及項(xiàng)目的元數(shù)據(jù)
└── package.json
//對(duì)項(xiàng)目的整個(gè)依賴(lài)樹(shù)做鎖定
└── package-lock.json
若在主項(xiàng)目中炭分，XQRNComponent不存在
//初始化子模塊（主工程目錄）
git submodule init
//更新子模塊（主工程目錄）
git submodule update
//添加RN項(xiàng)目依賴(lài)的node的modules（主工程/XQRNComponent目錄）
npm install
//添加主項(xiàng)目庫(kù)的依賴(lài)（主工程目錄）
pod install
2桃焕、解決 pod install 下載 GLog/Folly/DoubleConversion 太慢
- 1、提前將
GLog.podspec捧毛、DoubleConversion.podspec观堂、Folly.podspec、React.podspec下載好放在主目錄下的某文件夾中（如 XQFix） - 2呀忧、在主項(xiàng)目的podfile文件中
pod 'DoubleConversion', :podspec => './XQRNComponent/node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'GLog', :podspec => './XQRNComponent/node_modules/react-native/third-party-podspecs/Glog.podspec'
pod 'Folly', :podspec => './XQRNComponent/node_modules/react-native/third-party-podspecs/Folly.podspec'
- 3师痕、利用shell腳本，在主目錄下的script文件夾而账，創(chuàng)建以下腳本文件（
fix_rn.sh）胰坟，實(shí)現(xiàn)將.podspec移動(dòng)到XQRNComponent目錄下的/third-party-podspecs中。
#!/bin/sh
copy_thirdparty_specs_to_nodemodules() {
cp ../fix/DoubleConversion.podspec ../RNComponent/node_modules/react-native/third-party-podspecs
cp ../fix/GLog.podspec ../RNComponent/node_modules/react-native/third-party-podspecs
cp ../fix/Folly.podspec ../RNComponent/node_modules/react-native/third-party-podspecs
cp ../fix/React.podspec ../RNComponent/node_modules/react-native
}
copy_thirdparty_specs_to_nodemodules
- 4泞辐、現(xiàn)在scripts目錄下面執(zhí)行腳本：
./fix_rn.sh
3笔横、報(bào)錯(cuò) native module cannot be null
podfile需要引入RCTLinkingIOS
pod 'React', :path => './RNComponent/node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # Include this for RN >= 0.47
'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
'RCTText',
'RCTNetwork',
'RCTImage',
'RCTSettings',
'RCTVibration',
'RCTActionSheet',
'RCTBlob',
'RCTGeolocation',
'RCTBlob',
'RCTLinkingIOS',
'RCTWebSocket', # Needed for debugging
'RCTAnimation', # Needed for FlatList and animations running on native UI thread
# Add any other subspecs you want to use in your project
]
4、Xcode 編譯失敗咐吼，報(bào)錯(cuò) boost/iterator/iterator_adaptor.hpp’ 文件找不到吹缔，
- 1、XQRNComponent 文件夾锯茄、pods文件夾厢塘、Podfile.lock全部刪除；
- 2肌幽、Xcode clean后晚碾，關(guān)閉。
- 3喂急、XQRNComponent 按照1重新創(chuàng)建
- 4格嘁、pods重新安裝（pod install）
- 5、重啟xcode廊移。
- 6讥蔽、RN項(xiàng)目目錄下，npm start -- --reset-cache
5画机、Xcode 編譯失敗冶伞，報(bào)錯(cuò) No component found for view with name "RCTText" 。
打開(kāi) ./node_modules/react-native/React.podspec 步氏，將 RCTText 的 source_files 路徑修改為：
s.subspec "RCTText" do |ss|
ss.dependency "React/Core"
ss.source_files = "Libraries/Text/**/*.{h,m}"
end
該為facebook/react-native某版本的bug响禽，詳見(jiàn) #17920
6、開(kāi)發(fā)小記
- 1、
RCT_EXPORT_METHOD導(dǎo)出的方法芋类，默認(rèn)情況下在異步線(xiàn)程里面執(zhí)行隆嗅。可用GCD切到主線(xiàn)程執(zhí)行侯繁。 - 2胖喳、RN項(xiàng)目開(kāi)發(fā)中使用
Promise，注意贮竟，Promise的resolve方法只能傳遞一個(gè)參數(shù)丽焊，多寫(xiě)了，默認(rèn)只傳遞第一個(gè)咕别，若要傳遞多個(gè)技健，封裝成數(shù)組或字典傳遞。
