摘要: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 端同构初探》,原作者:胡奇。点击关注,第一时间了解华为云的新鲜技术~
