1.背景
随着对用户体验要求的提高，产品要求提升用户体验，多端体验一致。随着多端相同的业务也越来越多，需要投入IOS，Android，Web多端开发人员。这就迫切的需要一种一次开发同时使用在Android ，IOS ，Web的解决方案。达到降本增效的目的。在几个小业面尝试，总结经验后，我们采用react-native-web多端适配。
2.问题
a.对用户体验要求越来越高，主推RN，flutter逐步替代原始H5。
b.现RN代码独立在汽车之家APP和二手车之家APP独立运行，在H5环境运行还没尝试。
c.对RN接触较多较熟悉,对VUE等开发Html语言了解不多。
d.RN原生依赖的处理，大部分页面vue开发，如何挂载rn-web产物
3.解决方案
react-native-web走进了我们的视线，简单介绍下rn-web，facebook公司维护的开源项目，一个能使 react-native组件能运行到web的库。
4.说干就干
► a.搭建rn-web环境
npx react-native init rnweb064 --version 0.64.2
注:为什么选这个版本，因为主软件现在是0.64.2版本，cocoapods因为墙的问题可能会失败，不会爬墙的多试几次也能成功。
yarn add react-native-web
rn-web的核心，他主要解决了react代码转译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开发多件套，做H5的你应该比我更熟悉。
直接拷贝 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",
修改后目录结构：
增加src文件夹，rn-web环境搭建到这里已完成，遇到各种环境报错不再列举，现已可以运行出demo ，大部分文章到这就结束了。
但我们需要解决的问题几乎是没有提到的
1.如何调试log输出；
2.如何集成在其他Html内，并进行相互通信；
3.react-native集成了原生桥接如何分离；
4.多端业务代码如何管理
接下来开始我们的src里编码，并附上我们解决上述问题的方案
需要注意
1.在webpack.config.js引入src文件夹，让rn-web可编译
2.index.html只是我们一个壳，我们并不直接使用，所以可以增加背景调试工具VConsole等
► b.rn编码这里简单的介绍一个输入框在H5的样式
二手车APP（ios，android）；汽车之家（ios，android）；
具体实现，如何做到多端共用一套业务代码。
页面构成分析
1.输入框
2.listview
3.图片
4.键盘处理
5.网络请求
6.通知选择回调
7.返回按钮
8.公共工具类（刘海屏判断等）
上述大体分为三个部分
1.react-native默认支持（1，2，3，4）
这部分我们无需处理，rn-web默认支持。
2.主软件独立封装（5，6，7）
我们采用同类名，同方法名，区分端，空实现，保证业务代码在不同平台使用不同实现
业务入口-分端处理index.web.js和index.js分别持有下列入口
H5的入口 app.web.js
APP的入口 app.js
► a.网络请求
H5 我们采用fetch实现
在APP端采用原生桥接的网络库实现
► b.通知实现
APP端同理使用现有封装实现AHRNEventDispatcher不多介绍
h5页面我们采用了同类名，空实现，保证编译正常。
现在我们能运行一套业务代码在不同的环境了，其他UI差异如何处理。
1.业务判断Platform.OS != 'web'
2.增加后缀如上图，让reactnative可选择编译。
► c.关于回调及H5装载
rn-web打包后就是个js文件，可直接放到现有任何js文件中。注意需要放
入口。
这个js只是我们h5的一个页面，其他页面采用vue开发，H5方法直接挂在window上，保证其他页面能够调用到。
ReactNative编码如下：
if (Platform.OS == 'web') {
let json = JSON.stringify(mData);
window.che168_map_addressData_example.addOverlayFromAddress(json);
this.closeThisView();
} else {
this._closeNativeView(mData);
}
H5目录结构
react目录结构
共享业务代码HomeW，不同业务封装Util，主软件的reactnative-lib封装usedcar-web-lib
► d.关于业务代码如何共同管理，我们采用git子模块进行管理。
总结
本文这个业务比较简单，但也够说出关键思想，上述只有几处依赖原生代码，并进行了依赖改动
现有ReactNative已依赖大量原生桥接实现，这个修改是漫长的，但为了体验这是值得的。
在后续业务中，我们将继续同构业务到rn-web进行验证。
上述功能已在H5拍品直供，APP上门试驾发布。
作者|贾锡瑞
原文链接：https://www.cnblogs.com/88223100/p/React-native-web-cross-platform-combat.html
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：react-native-web跨平台实战 - Python技术站
微信扫一扫 
支付宝扫一扫 