摘要：ReactNative虽然已经进入了开源的第六个年头，但离1.0版本的发布还有很长的路要走。“Learnonce,writeanywhere”完全不影响ReactNative成为“不用JavaScript也能用”的框架，那么如何在ReactNative项目中引入react-native-web呢？React-native-web配置文件仓库地址：https://github.com/necolas/react-native-webreact-native-web是一个开源项目，由前Twitter、现Facebook工程师NicolasGallagher实现和维护。它是一个可以在Web上运行的ReactNative组件库和API，ReactNativeWindows、ReactNativemacOS等库纷纷将ReactNative扩展到新的平台。Twitter、Expo、MajorLeagueSoccer、Flipkart、Uber、《泰晤士报》、DataCamp和我们的小作坊都在生产中使用react-native-web。Chrome、Firefox、Edge、Safari7+、IE10+都支持使用react-native-web构建的网络应用程序。当然，值得注意的是，官方文档明确表示不支持ReactNative中废弃的组件和API，所以如果你的项目中有部分功能依赖第三方库，那部分功能可能需要额外处理.简单的认为react-native-web就是把ReactNative的组件和API重新适配为适合Web的标签和API，让它在Web上的行为在原生应用中尽量保持一致。从文档中你大概能感受到其中提及的Alert和Setting模块及其对应源码中的一两个，比如TextInput:所以也借鉴了ReactNative的一些代码作为适配的基础。如果想实现基于ReactNative的多端统一方案，可以参考去哪儿前端团队的实现方案：跨端开发，仓库地址：https://github.com/qunarcorp/qrn-remax-unir添加到ReactNative项目general创建新的ReactNative项目时，可以选择expo-cli或react-native-cli来创建。expo-cli中已经预设了对web的支持，如下图。在实际开发中，我们可能会使用react-native-cli脚手架搭建更多的项目，那么如何引入react-native-web呢？我们先初始化项目：目前我们的项目不支持在web中使用：为了让项目在web环境下运行，我们需要用到今天的主角--react-native-web，请介绍一下主角:然后我们就用复制大法，把我们可以用来初始化的App.web.jsx、index.html、index.web.js、webpack.config.js文件下下来：react-native-web然后在package.json添加build和web脚本：和expo-cli初始化的项目一样，执行yarnweb即可。这个时候本地的8080端口会运行一个服务，这个时候我们可以分别执行yarnios和yarnandroid就可以在android中看到ios模拟器和web端显示的一模一样的页面emulator，成功实现了一个react-native-web的多终端同构HelloWorld。当然这也意味着我们可能会把它编译成一个小程序，以后有机会一起讨论吧！这里需要注意的地方：代码复制成功还是要靠梯子，当然你也可以选择从网页下载；Android的成功运行依赖sudo755android/gradlew的权限；ReactNative的入口文件需要修改为App.web，否则只有web端才能读取App.web.js；正确执行./gradlewclean，重新yarnandroid等多年经验排错运行。探索代码的关键操作在于复制代码行的命令。下载4文件后你做了什么？复制攻城狮心里也打了一个大大的问号，说话便宜，给我看代码，打开文件就可以看到那些代码！index.html一个常见的单页应用入口，像下面代码中的div，我们称它为“根”DOM节点，因为里面的所有内容都会被ReactDOM管理。在当前情况下，我们只是设置一些基本样式以使主div具有完整的高度和宽度：index.web.js使用index.web.js来区分Web和移动，通过。扩展名可以使文件仅在网络上可用，其他一些扩展名也可以使用，例如移动设备的.native.js、.ios.js和.android.js。当然，如果你想将不同端的代码保存在一个index.js文件中，可以使用import{Platform}from'react-native'来根据情况区分不同平台的代码。您可以参考ReactNative官方文档，了解更多关于平台特定代码的信息。这与我们用于移动设备的index.js非常相似，但它还会将您的应用程序挂载到根目录中index.html中的一个div上。webpack.config.jswebpack虽然是重点内容，但是这里介绍的太多了，更详细的内容请去官方文档阅读。在本例中，我们使用了三个插件：HtmlWebpackPlugin来创建HTML；HotModuleReplacementPlugin用于热模块重新加载；DefinePlugin定义变量，比如__DEV__或NODE_ENV中的react-native-web。App.web.tsx这个文件是临时添加的，用于在使用ReactNativeWebIsomorphic之前验证我们的设置是否正常工作。最终，你可以删除这个文件，因为App的入口js文件可以在移动端运行，也可以在web端运行。但是，为了处理一些可以在web端运行而不能在移动端运行的业务，需要将代码提取出来，存放在一个后缀为.web.js的文件中。后记结合上面的简单案例，在后续的实际业务中，可以逐步尝试将同构业务迁移到Web上，并逐步验证。本文分享自华为云社区《React Native 项目 Web 端同构初探》，原作者：胡奇。点击关注，第一时间了解华为云的新鲜技术~
