資訊專欄INFORMATION COLUMN
摘要：官方教程，中文教程。也可使用根據(jù)提示對工程進(jìn)行轉(zhuǎn)原生混合方式，應(yīng)該不能逆轉(zhuǎn)吧。這時(shí)工程項(xiàng)目已經(jīng)初步完成。我實(shí)際工作中遇到很多類似報(bào)的頭文件未找到的問題。到此，工程的基本改造完成，盡情使用安裝第三方原生依賴吧。
官方教程，中文教程。網(wǎng)上也有很多其他資料，可自行搜索。
兩種教程里都提到2種方式：沙盒方式（expo）、與原生混合（Native Code），他們的區(qū)別在于是否會編寫原生代碼。expo方式中集成了部分原生的功能，直接引用expo sdk即可。也可使用yarn ejected根據(jù)提示對工程進(jìn)行轉(zhuǎn)原生混合方式，應(yīng)該不能逆轉(zhuǎn)吧。
考慮到國內(nèi)對APP的要求，如個(gè)性化、性能要求等等，還是選擇與原生混合方式較好，方便后期擴(kuò)展。
下面以iOS為例，記錄下我的改造過程：
1、工程目錄構(gòu)建
$ yarn global add react-native-cli
$ react-native init doctor_app
$ cd doctor_app
$ yarn install // 此步可能在init時(shí)已經(jīng)自動執(zhí)行過了
2、iOS添加pod支持
$ cd ios
$ pod init
$ vim Podfile // 更改platform為9.0，可以移除其他未用的target
$ pod install
雙擊打開生成的doctor_app.xcworkspace后，會在doctor_app工程中的Libraries看到React的默認(rèn)支持。這時(shí)iOS工程項(xiàng)目已經(jīng)初步完成。如果需要添加原生支持的RN三方依賴，以react-native-device-info為例
$ yarn add react-native-device-info
$ react-native link react-native-device-info // 推薦用link自動方式，也有其他多種方式，按照庫的問題操作即可
$ cd ios
$ pod install
最后，就可以在RN代碼里react-native-device-info的API，編譯后APP能正常運(yùn)行。
在上面pod install之后可能會注意到控制臺有黃色的提示[!] React has been deprecated，同時(shí)發(fā)現(xiàn)pod過程中安裝React 0.11.0，但明明package.json里使用的"react-native": "0.59.8"。
有強(qiáng)迫癥的表示不能接受，哈哈…..如果此時(shí)通過pod方式安裝code-push，編譯還會報(bào)錯(cuò)React/RCTEventEmitter.h file not found in CodePush.h，此問題在code-push的issues上有提到很多次。我實(shí)際工作中遇到很多類似報(bào)RN的頭文件未找到的問題。是不是很尷尬！明明裝了RN，而且還安裝了兩個(gè)版本。
大致原因就是頭文件引用的問題。下面用白話簡單闡述，雖說工程構(gòu)建時(shí)添加了RN版本A，走的Library形式，但是用pod安裝的RN依賴并不能準(zhǔn)確找到RN版本A的頭文件，導(dǎo)致會自動安裝一個(gè)RN版本B(即0.11.0)。這時(shí)用pod方式安裝的code-push會自動首先找到RN版本B，報(bào)上面的錯(cuò)誤也能理解，畢竟code-push發(fā)布時(shí)依賴RN版本最低要求0.xx.x（僅是我猜測，未驗(yàn)證！）。
解決方式就是將Library里的RN版本A移到Podfile里。
即把下面這些Library轉(zhuǎn)移到Podfile里去，這時(shí)有沒有想起什么？轉(zhuǎn)移原理其實(shí)是集成到現(xiàn)有原生應(yīng)用，只不過轉(zhuǎn)移后還保留了react-native-cli腳手架在Xcode中的配置，比如打包RN代碼的腳本等。一般情況下將RN集成到現(xiàn)有原生APP里，在打包APP時(shí)需要首先打包RN的離線文件，更詳細(xì)見React Native iOS打包詳解。
在Podfile里添加下面的代碼，然后pod install即可會安裝兩個(gè)RN版本的問題。
pod "React", :path => "../node_modules/react-native", :subspecs => [
"Core",
"CxxBridge",
"DevSupport",
"RCTText",
"RCTImage",
"RCTNetwork",
"RCTWebSocket",
"RCTAnimation",
"RCTLinkingIOS",
"RCTSettings",
"RCTGeolocation",
"RCTActionSheet",
"RCTVibration",
"RCTBlob",
]
pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
pod "DoubleConversion", :podspec => "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
pod "glog", :podspec => "../node_modules/react-native/third-party-podspecs/glog.podspec"
pod "Folly", :podspec => "../node_modules/react-native/third-party-podspecs/Folly.podspec"
為了保險(xiǎn)起見，將上述截圖里的RN子模塊全部移除掉Remove Reference，不是Move to Trash。接著用Xcode編譯試試APP看能不能正常運(yùn)行。
到此，RN工程的基本改造完成，盡情使用Podfile安裝RN第三方原生依賴吧。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/6840.html
摘要：初次搭建總會碰上各種報(bào)錯(cuò)以及紅黃屏報(bào)錯(cuò)如果尚未搭建環(huán)境，請轉(zhuǎn)至官網(wǎng)搭建紅屏是程序無法正常運(yùn)行，黃屏是程序可以運(yùn)行但是可能存在一些潛在問題首次使用命令行工具來創(chuàng)建一個(gè)名為的新項(xiàng)目后運(yùn)行后會報(bào)錯(cuò)，如圖解決方法到你的已有項(xiàng)目中復(fù)制一份文件到 初次搭建ReactNative總會碰上各種報(bào)錯(cuò)以及紅黃屏報(bào)錯(cuò)如果尚未搭建環(huán)境，請轉(zhuǎn)至官網(wǎng)搭建https://reactnative.cn/docs/g....
摘要：的響應(yīng)核心的響應(yīng)式系統(tǒng)是支撐整個(gè)框架運(yùn)行的關(guān)鍵，也是的核心之一，官方對這個(gè)核心的分層設(shè)計(jì)得很好也是依靠其驅(qū)動原生視圖。我們?nèi)粘Ｓ玫降亩加珊诵奶峁瑢@個(gè)核心稍作修改，去掉和，意外的獲得了一個(gè)極小的響應(yīng)核心，可以運(yùn)行于任何標(biāo)準(zhǔn)引擎下。 showImg(https://segmentfault.com/img/bVPMZy?w=1468&h=826); GitHub: react-vue ...
摘要：延伸閱讀學(xué)習(xí)與實(shí)踐資料索引與前端工程化實(shí)踐前端每周清單半年盤點(diǎn)之篇前端每周清單半年盤點(diǎn)之與篇前端每周清單半年盤點(diǎn)之篇 前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開發(fā)教程、工程實(shí)踐、深度閱讀、開源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號（ID：frontshow），及時(shí)獲取前端每周清單；本文則是對于半年來發(fā)布的前端每周清單...
閱讀 826·2019-08-30 14:05
閱讀 1718·2019-08-30 11:08
閱讀 3219·2019-08-29 15:41
閱讀 3595·2019-08-23 18:31
閱讀 1517·2019-08-23 18:29
閱讀 551·2019-08-23 14:51
閱讀 2109·2019-08-23 13:53
閱讀 2130·2019-08-23 13:02
