react-native-web跨平台实战

.背景

随着对用户体验要求的提高，产品要求提升用户体验，多端体验一致。随着多端相同的业务也越来越多，需要投入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://mp.weixin.qq.com/s/Aeg4C7hEkc4hriwXUsZeaQ

????【摘要】尽管 React Native 已经进入开源的第 6 个年头，距离发布 1.0 版本依旧是遥遥无期。“Learn once, write anywhere”,完全不影响 React Native 沦为“不会 JavaScript 也能用”的框架，那如何将在 React Native 项目中引入 react-native-web 呢？

react-native-web简介

仓库地址： https://github.com/necolas/react-native-web

react-native-web 是由前 Twitter 现 Facebook 工程师 Nicolas Gallagher 实现并维护的开源项目，是一个使 React Native 组件和 API 能运行在 Web 上的库，其和 React Native Windows, ReactNative macOS 等库将 React Native 拓展到一个又一个新的平台。目前推特、expo、大联盟足球、Flipkart、优步、《泰晤士报》、DataCamp 以及我们小作坊都在生产中使用了 react-native-web。Chrome、Firefox、Edge，Safari 7 +、IE 10+都支持通过 react-native-web 构建的 web 应用。当然值得注意的是，官方文档明确表示不支持 React Native 中不推荐使用的组件和 API，因此如果您项目中的某些功能依赖第三方库，可能那部分的功能在 web 端同构时需要额外处理。

浅显地认为react-native-web就是把React Native的组件和API都用适用于Web的标签和API再适配实现一遍，使其在Web上的行为和在原生应用上尽量保持一致，从文档中提到的 Alert 和 Setting 模块以及其对应的源码中大概能感受到一二，比如TextInput：

因此也借鉴了 React Native 的一些代码，作为适配的依据。

如果您想基于 React Native 实现多端统一化方案，可参考去哪儿前端团队的实现方案：跨端开发, 仓库地址：https://github.com/qunarcorp/qrn-remax-unir

添加到React Native项目

一般来说新建 React Native 项目时可以选用 expo-cli 或者 react-native-cli 来创建。expo-cli 中已经预置了对web的支持，如下图所示

而我们实际开发中可能用 react-native-cli脚手架来构建项目比较多些，那么如何引入 react-native-web呢？

我们先初始化项目：

此时我们的项目并不支持在web中使用：

为了项目能在web环境中运行，我们需要借助今天的主角--react-native-web，有请主角出台：

cd rn_web

yarn add react-native-web

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

接着我们施展Copy大法，将我们初始化能用到的App.web.jsx、index.html、index.web.js、webpack.config.js这几个文件一把 down下来：

curl -L https://gist.github.com/hu-qi/bde8a6d2b45325d93b1665174f938faa/download | tar -xvz --strip-components=1

react-native-web然后在package.json中添加build和web的脚本：

就和 expo-cli 初始化的项目一样可以执行yarn web,这时会在本地8080端口运行一个服务，这时我们分别执行yarn ios 和 yarn android就能看到在ios模拟器和Android模拟器中显示和web端一模一样的页面,一次 react-native-web 的多端同构 Hello World 就成功实现了，当然这也意味着我们还可能编译成小程序，后续有机会一起探讨探讨！

此处的注意点：

1.代码能得以成功拷贝全靠梯子，当然也可以选择去网页下载；

2.Android能得以成功运行，全靠给权限sudo 755 android/gradlew;

3.React Native 入口文件需修改为 App.web,不然只有Web端才能读取App.web.js;

4.适当执行./gradlew clean重新yarn android等多年经验积累骚操作排除故障。

探究代码

关键的操作在于那行Copy代码的命令，那究竟上文中提到到下载了4的文件到底做了啥呢？Copy攻城狮心中也有一个大大的问号，Talk is cheap, show me the code，打开文件看看那些代码吧！

index.html 常见的单页面应用入口，像下面代码中的 div 我们称其为“根” DOM节点，因为其中的所有内容都将由React DOM进行管理。在当前案例中，我们只是设置一些基本样式以使主体div具有完整的高度和宽度：

index.web.js使用index.web.js可以在Web和移动端之间区分开来，通过.web.js扩展名可以使该文件仅在Web上使用,其他一些可用的扩展如.native.js、.ios.js和.android.js适用于移动端。当然，如果您希望将本不同端的代码都保存在一个index.js文件中，则可以使用import { Platform } from 'react-native'来按照条件区分不同平台的代码。可以参考React Native官方文档中有关平台特定代码的更多信息。

这与我们移动端的index.js非常相似，不过它还将您的应用程序挂载到根目录中index.html的div上。

webpack.config.js

webpack虽然是重点内容，但此处不过过多介绍，请前往官方文档阅读更加详细的内容，此案例中我们用到了三个插件：

o HtmlWebpackPlugin创建HTML；

o HotModuleReplacementPlugin用于热模块重装；

o DefinePlugin定义变量，例如__DEV__或NODE_ENV中react-native-web。

App.web.tsx

该文件是临时添加的文件，用于在使用React NativeWeb 同构之前验证我们的设置是否正常运行。最终，您可以删除此文件，因为App的入口js文件可以在移动端运行，也能在Web端运行。不过为了处理某些在Web上能运行而在移动端不能运行的业务，需要将代码抽离出来存放在`.web.js`为后缀的文件中。

后记

结合上述的简单案例，在后续实际业务中，我们可以逐步尝试同构业务到Web并逐步进行验证。

本文分享自华为云社区《ReactNative 项目 Web 端同构初探》，原文作者：胡琦。

点击关注，第一时间了解华为云新鲜技术~

家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

今天给大家带来的主题是 NativeScript 和 React Native 之间的比较，随着 NativeScript 8.5.4 版本的最新发布，我觉得是时候跟大家聊聊这个跨平台原生应用框架了。话不多说，直接进入正题！

1.什么是 NativeScript 和 React Native？

使用 JavaScript 构建跨平台移动应用程序已经悄然改变了 JavaScript 开发人员的默认规则。开发人员不仅可以构建在 Web 上运行的应用程序，还可以构建使用 JavaScript 运行的适用于 Android 和 iOS 的 Native 应用程序。

而随着 React Native 和 NativeScript 等不同框架的兴起，开发者已经可以使用 JavaScript 构建高效、生产就绪且可扩展的移动应用程序。

首先一起来聊聊 NativeScript。NativeScript 的愿景是通过直接使用平台 API 来解放开发，而无需使得开发者放弃对 JavaScript 的热爱。在与框架无关的团队中使用 JavaScript 构建跨平台移动应用程序时，值得将 NativeScript 视为首选工具。

? Empowering JavaScript with native platform APIs. ? Best of all worlds (TypeScript, Swift, Objective C, Kotlin, Java). Use what you love ?? Angular, Capacitor, Ionic, React, Solid, Svelte, Vue with: SwiftUI, Jetpack Compose, Flutter and you name it compatible.

因此，无论选择的 JavaScript 框架是 Vue、React、Svelte、Angular 还是 Vanilla JavaScript，NativeScript 都能满足开发者需求。

另一方面，React Native 是 Facebook 创建的一个 JavaScript 库，它使用 React 构建原生移动应用程序，这意味着开发者无法使用 Vue、Angular 或任何其他 JavaScript 框架来完成 React Native 的移动应用程序构建。

但是，这并不意味着 App 或 Play 商店上的所有 React Native 应用程序都是使用纯 JavaScript 构建的，因为在某些情况下，开发人员必须使用 Swift/Objective-C 或 Java/Kotlin 编写 Native 代码才能访问默认情况下 JavaScript 不可用的 Native API 。

考虑到这一点，接下来一起看看 React Native 与 NativeScript 之间的比较。

2.NativeScript 和 React Native 社区支持

社区支持是选择正确框架时要考虑的最重要因素之一，但是令人惊讶的是 NativeScript 比 React Native 存在的时间更长。 NativeScript 的初始版本是在 2014 年，而 React Native 最初版本是在 2015 年 3 月 26 日发布。

虽然一年的差异似乎是一种优势，但 React Native 的增长和采用率远高于 NativeScript。 React Native 在 npm 上记录的每周下载量约为 1632k，而 NativeScript 每周平均下载量大约为 10k。

在贡献者方面，React Native 在 GitHub 上拥有超过 2,506 名贡献者，而 NativeScript 有 226 名贡献者。 NativeScript 被超过 6k 名开发人员使用，而 React Native 在 GitHub 上超过 1352k 的开发人员使用。

这一巨大差距展示了开发者社区对 React Native 的广泛采用，并影响了第三方库的数量、错误修复和 StackOverflow 上的答案。因此，在社区支持方面，React Native 更受欢迎。

3.NativeScript 和 React Native 快速入门

3.1 设置 React Native 项目

对于刚接触移动开发的 Web 开发人员来说，开始和设置 React Native 项目可能具有挑战性，当然可以借助于 Expo。Expo 用于构建一个在所有用户设备上本地运行的 JavaScript/TypeScript 项目。

Build one JavaScript/TypeScript project that runs natively on all your users' devices.

可以通过下面命令快速使用 Expo:

npx create-expo-app my-app

虽然 Expo 确实有一些限制，但这些限制不会影响大多数使用 Expo 构建的应用程序。开发者还可以使用 Expo Go，Expo Go 是一个免费的开源客户端，用于在 Android 和 iOS 设备上测试 React Native 应用程序，而无需在本地构建任何东西。它允许开发者打开通过 Expo CLI 提供的应用程序，并在开发它们时更快地运行项目。

Expo Go在 Android Play 商店和 iOS App Store 上均可用。

Android Play 商店 - Android Lollipop (5) 及更高版本
iOS 应用商店 - iOS 13 及更高版本

对于具有 React 背景的开发人员来说，开始使用 React Native 更容易。但是，如果选择的主要 JavaScript 是 Angular，那么学习曲线可能会很陡峭。

3.2 设置 NativeScript 项目

在引导 NativeScript 应用程序时，使用官方模板开始使用 NativeScript 相当容易。开发者可以通过在终端中运行以下命令来初始化带有侧边抽屉的 NativeScript 应用程序：

ns create myCoolApp --template <template-package-name>
// 直接运行该命令
ns create myCoolApp --angular 
// or --ng for short
ns create myCoolApp --vue
ns create myCoolApp --vue --ts 
// for vue with typescript
ns create myCoolApp --react
ns create myCoolApp --js
ns create myCoolApp --svelte
// 使用指定风格的默认模板创建应用程序

NativeScript 的优点在于它与框架无关，这意味着开发者可以使用 Angular、Vue、Svelte、React 甚至 Vanilla JavaScript 等 JavaScript 框架使用 NativeScript 构建移动应用程序。

然而，与其他任何框架相比，NativeScript 与 Angular 的同步效果最好，因为 NativeScript 团队与 Google 合作以确保这两种工具在构建移动应用程序时能够无缝工作。

通过使用 NativeScript Playground 应用程序，开发者可以在物理 Android 和 iOS 设备上运行应用程序，就像 Expo Go 一样。

总体而言，Expo Go 应用程序提供了比 NativeScript playground 更好的开发人员体验，因此对于寻求更简单设置体验的开发人员来说，这是一个加分项。

4.NativeScript 和 React Native 热加载

React Native 热加载

热加载功能在移动应用程序开发中非常重要，因为极大地提高了开发人员的工作效率。没有开发人员愿意等待超过一分钟时间来查看在开发阶段注入到移动应用程序中的每个小变化。

在 React Native 0.61 版本中，团队宣布了一项名为快速刷新的功能。快速刷新统一了之前 React Native 版本中已经存在的实时重新加载功能和热重新加载功能。

启用快速刷新后，开发者可以对应用程序进行更改并几乎立即看到更改。默认情况下，此功能会保留功能组件中的本地状态，但不会保留类组件中的本地状态。

NativeScript 热模块替换

NativeScript 的热模块替换 (HMR) 功能在 NativeScript 5.3 中发布。它支持 Visual Studio Code 调试，即使 HMR 功能仍在运行，开发人员也可以使用调试器。

NativeScript 还完全支持 SASS 文件，这意味着当在应用程序中对 .scss 或 .sass 文件进行更改时，会在开发过程中快速反映在应用程序中。HMR 在从 NativeScript 应用程序目录中添加或删除文件时也能起作用。

NativeScript 也支持 .vue 文件中的脚本更改，但是在 Vue 中使用 TypeScript 时它有一个限制，并且在开箱即用的 NativeScript Angular 项目中有完整的 HMR 支持，不需要额外的配置。

HMR 和快速刷新的性能相似，并且都具有巧妙构建的功能，例如在 NativeScript 中调试 Visual Studio Code 和在 React Native 中进行错误恢复。

5.Native API

React Native API

React Native 附带了一些基本的开箱即用模块，但在某些情况下，开发者可能需要 React Native 尚无相应模块的原生功能。在这种情况下，则必须编写 Native 模块（Native Modules）来与 Native API 进行通信。

实现这一点需要特殊的桥梁，这需要一定程度的 Native 开发专业知识。但是，考虑到 React Native 生态的规模，开发者可能很容易在 GitHub 或 npm 上找到现有的原生模块。

NativeScript API

在 NativeScript 中访问 Native Platform API 是 NativeScript 最重要的特性。开发人员可以从 JavaScript 调用平台 API，而不是使用 Objective-C 或 Kotlin 编写本机代码。

const formatMessage=level=> `The Battery Level is: ${level}%`
// iOS直接原生访问！
let value=UIDevice.currentDevice.batteryLevel * 100
// Android 
let value=bm.getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY)
alert(formatMessage(value))

这就是 NativeScript 优于 React Native 的地方，因为 JavaScript 开发人员不需要特定平台语言的专业知识即可使用 Native API。

下面是一些 npm 包，其是 NativeScript 开发的基础并且很容易理解。

@nativescript/core：一个 JavaScript 库，提供易于使用的 api，用于与 iOS 和 Android 平台 API 交互。
@nativescript/android：支持 Android NativeScript 开发的 v8 JavaScript 引擎运行时。
@nativescript/ios：支持 iOS NativeScript 开发的 v8 JavaScript 引擎运行时。开发者还可以使用 npm 标签 JSC 使用此运行时的 JavaScriptCore 版本，这对于可能遇到 v8 引擎问题的项目很有用。
@nativescript/types：是为所有可用于进行 NativeScript 开发的 iOS 和 Android API 提供了 TypeScript 定义。
@nativescript/webpack：这为所有基础 NativeScript 开发提供了加载程序、帮助程序和基本配置，以调试、运行、构建和发布应用程序。
nativescript：CLI（命令行界面）用于创建/运行/构建/部署 NativeScript 应用程序。通常通过 npm install -g nativescript 进行全局安装以及适当的环境设置。

6.React Native 和 NativeScript 性能

NativeScript 应用程序通常较慢，因为该框架采用单线程方法来访问本机设备 API。

与 NativeScript 不同，React Native 应用程序使用多线程模型，其中 JavaScript 和应用程序的界面在不同的线程上运行。因此，在构建性能是关键因素的移动应用程序时，React Native 是最佳选择。

React Native 还提供更快的 UI 渲染，因为它使用虚拟 DOM 来更新应用程序 UI，类似于 React。

7.NativeScript 和 React Native 文档支持

NativeScript 的文档很容易理解，并且有一些关于如何实现动画、手势、HTTP 请求和代码共享等内容的非常棒的插图。

而且，对于 NativeScript 与 Svelte 和 Vue 的特定用例，有单独的文档。但大多数时候，开发人员必须在官方文档之外了解 NativeScript 生态系统的工作原理。

React Native 拥有比 NativeScript 更成熟的生态系统，随之而来的是对文档明确的期望，因为跨平台移动应用程序开发的初学者和专家都可以访问它。

然而，虽然文档通俗易懂，但缺乏细节，这可能会使初学者不清楚一些概念。

使用 Expo 构建 React Native 应用程序并使用 Expo 文档简化了作为初学者构建功能性 React Native 应用程序的 React Native 文档的使用。

两者都没有最好的文档，使用这两种框架的开发人员通常必须超越官方文档才能了解框架的各个方面。

8.使用 NativeScript 和 React Native 的公司

React Native 目前被 Facebook、Bloomberg、Coinbase、Discord、Tesla 等顶级品牌和公司用于生产。这证明了 React Native 的规模和流行程度。

Facebook marketplace 也是用 React Native 构建的，证明如果你有一个用本地语言编写的现有移动应用程序，你可以逐步采用 React Native 来构建你的移动应用程序的不同部分。

尽管 React Native 在这里成为焦点，但这并不意味着 NativeScript 不能解决 React Native 为使用它的公司所做的业务问题。看看这里使用 NativeScript 构建的很棒的应用程序表明它可以构建生产就绪的移动应用程序。

9.本文总结

作为 Web 开发人员使用 JavaScript 构建移动应用程序是一种很棒的体验，因为该语言在 Web 浏览器上运行以构建适用于 Android 和 iOS 的本机应用程序。在所有用于构建跨平台应用程序的 JavaScript 框架中，React Native 和 NativeScript 位居榜首。

在这篇文章中，我们介绍了每个框架的独特之处以及它们的发展程度。选择任一框架最终取决于移动应用程序的要求、性能成本、首选 JavaScript 框架、移动应用程序开发的先验知识以及所需的本机 API。

因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料

https://blog.logrocket.com/nativescript-react-native/

https://nativescript.org/

https://docs.nativescript.org/understanding-packages.html#nativescript-ios

https://www.monterail.com/blog/nativescript-vs-react-native

https://docs.nativescript.org/introduction.html

https://github.com/facebook/react-native

https://tsh.io/blog/react-native-vs-nativescript/

https://docs.nativescript.org/#overview-of-nativescript-development

在线咨询

上一篇：Compose全新文本输入框？拿来吧你
下一篇：JavaScript 侦测手机浏览器的五种方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商