1.背景技术随着用户体验要求的提高，产品要求提升用户体验，多终端体验一致。随着同一业务在多端的越来越多，需要投入IOS、Android、Web多端开发者。迫切需要一种可以同时在Android、IOS、Web上开发使用的方案。达到降本增效的目的。在尝试了几个小企业，总结经验后，我们采用react-native-web多端适配。2.问题一。对用户体验的要求越来越高，主推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.就去做吧。搭建rn-web环境npxreact-nativeinitrnweb064--version0.64.2注：为什么选择这个版本，因为现在主要软件是0.64.2版本，cocoapods可能会因为被墙问题而失败，如果不知道怎么翻墙，多试几次就成功了。yarnaddreact-native-webrn-web的核心，他主要解决react代码翻译js代码yarnadd-Dbabel-plugin-react-native-webwebpackwebpack-cliwebpack-dev-serverhtml-webpack-pluginreact-dombabel-loaderurl-loader@svgr/webpackh5开发多套，你应该比我更熟悉H5。直接复制App.web.js、index.html、index.web.js、webpack.config.js，修改package.json，添加编译打包"build":"rm-rfdist/&&webpack--mode=production--configwebpack.config.js","build1":"rm-rfdist/&&webpack--mode=development--configwebpack.config.js","dev":"webpack-dev-server--configwebpack.config.js--port8090--open"，修改后的目录结构：添加src文件夹，这里已经搭建了rn-web环境，在各种环境下不会列出任何错误，demo现在可以被运行。部分文章到此结束。但是我们要解决的问题几乎没有提到1.如何调试日志输出；2、如何在其他Html中集成并相互通信；3.如何分离react-native集成nativebridge；4.多端业务代码如何管理接下来开始在我们的src中编码，附上我们针对上述问题的解决方案。Note1.在webpack.config.js中引入src文件夹，使rn-web可以编译2.index.html对我们来说只是一个shell，我们不会直接使用，所以可以添加后台调试工具如VConsole和其他b.rn代码。这里简单介绍一下H5风格的二手车APP（ios、android）中的一个输入框；汽车之家（ios、安卓）；具体实现，如何将一套业务代码共享给多个终端。页面构成分析1.输入框2.listview3.图片4.键盘处理5.网络请求6.通知选择回调7.返回按钮8.公共工具（刘海屏判断等）以上大致分为三部分1.react-native默认支持(1,2,3,4)，这部分我们不需要处理，rn-web默认支持。2、主要软件独立打包（5、6、7）。我们使用同名、同方法名、不同终端、空实现来保证业务代码在不同平台上使用不同的实现。.js分别持有如下入口H5入口app.web.jsAPP入口app.js?a。网络请求H5我们使用fetch，利用原生bridge网络库b来实现APP端的实现。Notification的实现APP端使用同样的方法实现AHRNEventDispatcher，没有封装。h5页面的介绍不多。我们使用相同的名称和空实现来确保正常编译。既然我们可以在不同的环境中运行一套业务代码，那么如何处理其他的UI差异。1、业务判断Platform.OS!='web'2、如上图添加后缀，让reactnative可以选择编译。C。关于回调和H5加载rn-web是打包后的js文件，可以直接放在任何已有的js文件中。注意需要含在嘴里。这个js只是我们h5的一个页面。其他页面用vue开发。H5方法直接挂在窗口上，保证其他页面可以调用。ReactNative的编码是这样的：mData);}H5目录结构react目录结构共享业务代码HomeW，不同业务包Util，主要软件使用的reactnative-lib包car-web-libd。关于如何共同管理业务代码，我们使用git分模块进行管理。综上所述，本文的业务比较简单，但足以说出核心思想。上面只有几个地方依赖nativecode，做了依赖的改动。现有的ReactNative已经依赖了大量的原生桥。这个修改时间很长，但是对于体验来说还是值得的。在后续业务中，我们会继续将同构业务交给rn-web进行验证。以上功能已在H5拍卖直供，APP上门试驾已上线。作者简介贾锡瑞二手车事业部-技术部。加入汽车之家多年，一直从事研发工作。现负责二手车之家及其他汽车之家二手车业务的相关研发工作。
