建站
咨詢
售后
建站咨詢
新聞中心
1.背景
隨著對(duì)用戶體驗(yàn)要求的提高，產(chǎn)品要求提升用戶體驗(yàn)，多端體驗(yàn)一致。隨著多端相同的業(yè)務(wù)也越來(lái)越多，需要投入IOS，Android，Web多端開(kāi)發(fā)人員。這就迫切的需要一種一次開(kāi)發(fā)同時(shí)使用在Android ，IOS ，Web的解決方案。達(dá)到降本增效的目的。在幾個(gè)小業(yè)面嘗試，總結(jié)經(jīng)驗(yàn)后，我們采用react-native-web多端適配。
2.問(wèn)題
a.對(duì)用戶體驗(yàn)要求越來(lái)越高，主推RN，flutter逐步替代原始H5。
b.現(xiàn)RN代碼獨(dú)立在汽車(chē)之家APP和二手車(chē)之家APP獨(dú)立運(yùn)行，在H5環(huán)境運(yùn)行還沒(méi)嘗試。
c.對(duì)RN接觸較多較熟悉,對(duì)VUE等開(kāi)發(fā)Html語(yǔ)言了解不多。
d.RN原生依賴(lài)的處理，大部分頁(yè)面vue開(kāi)發(fā)，如何掛載rn-web產(chǎn)物
3.解決方案
react-native-web走進(jìn)了我們的視線，簡(jiǎn)單介紹下rn-web，facebook公司維護(hù)的開(kāi)源項(xiàng)目，一個(gè)能使 react-native組件能運(yùn)行到web的庫(kù)。
4.說(shuō)干就干
a.搭建rn-web環(huán)境
npx react-native init rnweb064 --version 0.64.2
注:為什么選這個(gè)版本，因?yàn)橹鬈浖F(xiàn)在是0.64.2版本，cocoapods因?yàn)閴Φ膯?wèn)題可能會(huì)失敗，不會(huì)爬墻的多試幾次也能成功。
yarn add react-native-web
rn-web的核心，他主要解決了react代碼轉(zhuǎn)譯js代碼
yarn add -D babel-plugin-react-native-web webpack webpack-cli webpack-dev-server html-webpack-plugin react-dom babel-loader url-loader @svgr/webpack
h5開(kāi)發(fā)多件套，做H5的你應(yīng)該比我更熟悉。
直接拷貝 App.web.js、index.html、index.web.js、webpack.config.js
修改package.json增加編譯及打包
"build": "rm -rf dist/ && webpack --mode=production --config webpack.config.js",
"build1": "rm -rf dist/ && webpack --mode=development --config webpack.config.js",
"dev": "webpack-dev-server --config webpack.config.js --port 8090 --open",
修改后目錄結(jié)構(gòu)：
增加src文件夾，rn-web環(huán)境搭建到這里已完成，遇到各種環(huán)境報(bào)錯(cuò)不再列舉，現(xiàn)已可以運(yùn)行出demo ，大部分文章到這就結(jié)束了。
但我們需要解決的問(wèn)題幾乎是沒(méi)有提到的
1.如何調(diào)試log輸出；
2.如何集成在其他Html內(nèi)，并進(jìn)行相互通信；
3.react-native集成了原生橋接如何分離；
4.多端業(yè)務(wù)代碼如何管理
接下來(lái)開(kāi)始我們的src里編碼，并附上我們解決上述問(wèn)題的方案
需要注意
1.在webpack.config.js引入src文件夾，讓rn-web可編譯
2.index.html只是我們一個(gè)殼，我們并不直接使用，所以可以增加背景調(diào)試工具VConsole等
b.rn編碼這里簡(jiǎn)單的介紹一個(gè)輸入框在H5的樣式
二手車(chē)APP（ios，android）；汽車(chē)之家（ios，android）；
具體實(shí)現(xiàn)，如何做到多端共用一套業(yè)務(wù)代碼。
頁(yè)面構(gòu)成分析
1.輸入框
2.listview
3.圖片
4.鍵盤(pán)處理
5.網(wǎng)絡(luò)請(qǐng)求
6.通知選擇回調(diào)
7.返回按鈕
8.公共工具類(lèi)（劉海屏判斷等）
上述大體分為三個(gè)部分
1.react-native默認(rèn)支持（1，2，3，4）
這部分我們無(wú)需處理，rn-web默認(rèn)支持。
2.主軟件獨(dú)立封裝（5，6，7）
我們采用同類(lèi)名，同方法名，區(qū)分端，空實(shí)現(xiàn)，保證業(yè)務(wù)代碼在不同平臺(tái)使用不同實(shí)現(xiàn)
業(yè)務(wù)入口-分端處理index.web.js和index.js分別持有下列入口
H5的入口 app.web.js
APP的入口 app.js
? a.網(wǎng)絡(luò)請(qǐng)求
H5 我們采用fetch實(shí)現(xiàn)
在APP端采用原生橋接的網(wǎng)絡(luò)庫(kù)實(shí)現(xiàn)
b.通知實(shí)現(xiàn)
APP端同理使用現(xiàn)有封裝實(shí)現(xiàn)AHRNEventDispatcher不多介紹
h5頁(yè)面我們采用了同類(lèi)名，空實(shí)現(xiàn)，保證編譯正常。
現(xiàn)在我們能運(yùn)行一套業(yè)務(wù)代碼在不同的環(huán)境了，其他UI差異如何處理。
1.業(yè)務(wù)判斷Platform.OS != 'web'
2.增加后綴如上圖，讓reactnative可選擇編譯。
c.關(guān)于回調(diào)及H5裝載
rn-web打包后就是個(gè)js文件，可直接放到現(xiàn)有任何js文件中。注意需要放
入口。
這個(gè)js只是我們h5的一個(gè)頁(yè)面，其他頁(yè)面采用vue開(kāi)發(fā)，H5方法直接掛在window上，保證其他頁(yè)面能夠調(diào)用到。
ReactNative編碼如下：
if (Platform.OS == 'web') {let json = JSON.stringify(mData);window.che168_map_addressData_example.addOverlayFromAddress(json);this.closeThisView();} else {this._closeNativeView(mData);}H5目錄結(jié)構(gòu)
react目錄結(jié)構(gòu)
共享業(yè)務(wù)代碼HomeW，不同業(yè)務(wù)封裝Util，主軟件的reactnative-lib封裝usedcar-web-lib
d.關(guān)于業(yè)務(wù)代碼如何共同管理，我們采用git子模塊進(jìn)行管理。
總結(jié)
本文這個(gè)業(yè)務(wù)比較簡(jiǎn)單，但也夠說(shuō)出關(guān)鍵思想，上述只有幾處依賴(lài)原生代碼，并進(jìn)行了依賴(lài)改動(dòng)
現(xiàn)有ReactNative已依賴(lài)大量原生橋接實(shí)現(xiàn)，這個(gè)修改是漫長(zhǎng)的，但為了體驗(yàn)這是值得的。
在后續(xù)業(yè)務(wù)中，我們將繼續(xù)同構(gòu)業(yè)務(wù)到rn-web進(jìn)行驗(yàn)證。
上述功能已在H5拍品直供，APP上門(mén)試駕發(fā)布。
作者簡(jiǎn)介
賈錫瑞
二手車(chē)事業(yè)部-技術(shù)部。
加入汽車(chē)之家多年，一直從事研發(fā)工作，現(xiàn)負(fù)責(zé)二手車(chē)之家以及其他汽車(chē)之家二手車(chē)業(yè)務(wù)的相關(guān)研發(fā)工作。
網(wǎng)站標(biāo)題：React-native-web跨平臺(tái)實(shí)戰(zhàn)
轉(zhuǎn)載來(lái)于：http://www.dlmjj.cn/article/dhhjdij.html
