1.背景 

隨著對用戶體驗要求的提高，產(chǎn)品要求提升用戶體驗，多端體驗一致。隨著多端相同的業(yè)務(wù)也越來越多，需要投入IOS，Android，Web多端開發(fā)人員。這就迫切的需要一種一次開發(fā)同時使用在Android ，IOS ，Web的解決方案。達到降本增效的目的。在幾個小業(yè)面嘗試，總結(jié)經(jīng)驗后，我們采用react-native-web多端適配。

2.問題

a.對用戶體驗要求越來越高，主推RN，flutter逐步替代原始H5。

b.現(xiàn)RN代碼獨立在汽車之家APP和二手車之家APP獨立運行，在H5環(huán)境運行還沒嘗試。

c.對RN接觸較多較熟悉,對VUE等開發(fā)Html語言了解不多。

d.RN原生依賴的處理，大部分頁面vue開發(fā)，如何掛載rn-web產(chǎn)物

3.解決方案

 react-native-web走進了我們的視線，簡單介紹下rn-web，facebook公司維護的開源項目，一個能使 react-native組件能運行到web的庫。

4.說干就干

a.搭建rn-web環(huán)境  

npx react-native init rnweb064 --version 0.64.2

注:為什么選這個版本，因為主軟件現(xiàn)在是0.64.2版本，cocoapods因為墻的問題可能會失敗，不會爬墻的多試幾次也能成功。

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開發(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)境報錯不再列舉，現(xiàn)已可以運行出demo ，大部分文章到這就結(jié)束了。

但我們需要解決的問題幾乎是沒有提到的

1.如何調(diào)試log輸出；

2.如何集成在其他Html內(nèi)，并進行相互通信；

3.react-native集成了原生橋接如何分離；

4.多端業(yè)務(wù)代碼如何管理

接下來開始我們的src里編碼，并附上我們解決上述問題的方案

需要注意

1.在webpack.config.js引入src文件夾，讓rn-web可編譯

2.index.html只是我們一個殼，我們并不直接使用，所以可以增加背景調(diào)試工具VConsole等

 b.rn編碼這里簡單的介紹一個輸入框在H5的樣式

二手車APP（ios，android）；汽車之家（ios，android）；  

具體實現(xiàn)，如何做到多端共用一套業(yè)務(wù)代碼。

頁面構(gòu)成分析

1.輸入框

2.listview

3.圖片

4.鍵盤處理

5.網(wǎng)絡(luò)請求

6.通知選擇回調(diào)

7.返回按鈕

8.公共工具類（劉海屏判斷等）

上述大體分為三個部分

1.react-native默認支持（1，2，3，4）

這部分我們無需處理，rn-web默認支持。

2.主軟件獨立封裝（5，6，7）

我們采用同類名，同方法名，區(qū)分端，空實現(xiàn)，保證業(yè)務(wù)代碼在不同平臺使用不同實現(xiàn)

業(yè)務(wù)入口-分端處理index.web.js和index.js分別持有下列入口

H5的入口 app.web.js

APP的入口 app.js

? a.網(wǎng)絡(luò)請求

H5 我們采用fetch實現(xiàn)

在APP端采用原生橋接的網(wǎng)絡(luò)庫實現(xiàn)

 b.通知實現(xiàn)

APP端同理使用現(xiàn)有封裝實現(xiàn)AHRNEventDispatcher不多介紹

h5頁面我們采用了同類名，空實現(xiàn)，保證編譯正常。

現(xiàn)在我們能運行一套業(yè)務(wù)代碼在不同的環(huán)境了，其他UI差異如何處理。

1.業(yè)務(wù)判斷Platform.OS != 'web'

2.增加后綴如上圖，讓reactnative可選擇編譯。

c.關(guān)于回調(diào)及H5裝載

 rn-web打包后就是個js文件，可直接放到現(xiàn)有任何js文件中。注意需要放

入口。

 這個js只是我們h5的一個頁面，其他頁面采用vue開發(fā)，H5方法直接掛在window上，保證其他頁面能夠調(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子模塊進行管理。

 總結(jié) 

本文這個業(yè)務(wù)比較簡單，但也夠說出關(guān)鍵思想，上述只有幾處依賴原生代碼，并進行了依賴改動

現(xiàn)有ReactNative已依賴大量原生橋接實現(xiàn)，這個修改是漫長的，但為了體驗這是值得的。

在后續(xù)業(yè)務(wù)中，我們將繼續(xù)同構(gòu)業(yè)務(wù)到rn-web進行驗證。

上述功能已在H5拍品直供，APP上門試駕發(fā)布。

作者簡介

 賈錫瑞 

二手車事業(yè)部-技術(shù)部。

 加入汽車之家多年，一直從事研發(fā)工作，現(xiàn)負責(zé)二手車之家以及其他汽車之家二手車業(yè)務(wù)的相關(guān)研發(fā)工作。