11

刚好看到 React-Native-Web(RNW) ，我的想法是什么？为什么我们需要另一个 React for Web 版本？我们已经有了 ReactJS(RJS)。

所以我去了它的网站，看到文档说它允许你通过使用 React DOM、高质量等来使用 Native 组件。

我仍然不太清楚使用 RNW 的区别和好处。

有人可以用一些具体的例子和性能数据等来启发我吗？

我知道 Twitter 和其他一些应用程序正在使用它，但只是告诉我“Twitter 正在使用它”就足够了，但还不够清楚地说明差异。

4

3 回答 3

12

老实说，使用 react-native-web 的理由有点审美，举个例子：

React Native 是一种纯 UI 语言。它定义了一些定义 UI 原语的基本组件，这些组件被认为独立于运行它们的平台。我们可以在 React Native 中创建的所有组件都基于 View、Text 或 Image 等基本元素，这些基本元素对任何视觉界面都有意义，无论它在哪里运行。

另一方面，React 的原语只是 DOM 节点——像 div、p 或 a 这样的 HTML 标签，它们不是纯 UI。它们不是为了定义视觉语言而创建的；相反，它们旨在构建和理解超文本。React 的原语具有超越界面的意义，而这种意义在浏览器之外没有多大意义。

取自这里。我开发了 ReactJs 和 RN 应用程序和网站，我能看到的唯一真正好处是统一的编码语言。由于我从 RN 开始，然后将 ReactJS 添加到我的简历中，我发现在 ReactJs 中找到等效的 RN 组件是一件很痛苦的事，哦，我应该使用 p 和 span 而不是 Text？，哦，它是'输入类型="text"' 不是 'TextInput' 等等。我想你明白我的意思。对于进入 RN 世界的 React 开发人员来说，可能也是如此。但它也有它的缺点，不幸的是使用 react-native-web 需要一些麻烦，你必须为它准备你的项目。

谢谢你的解释。您能否更具体一些，并为“一些麻烦”提供更多细节或示例？谢谢！

例如 React-Native（和它的一些库）是基于Promise框架而不是普通的 JS，或者Object.assign添加了 ES6，为了使用它们你必须修改 webpack.config.js 和 .bael-rc 文件在这些文件中添加多行。如果您正在使用其他帮助工具，例如 Flow 或 Jest 等，它们也必须进行配置。它肯定会在开始时减慢您的速度，但如果您花时间进行设置，从长远来看它是值得的。

于 2019-06-12T04:55:16.043 回答
3

如果您需要将 react-native 应用程序移植到 Web，请使用 RNW。如果您只需要创建一个网络应用程序，请使用带有 ui 库的 react，例如 material-ui（我最喜欢的 ui 库）。

于 2019-06-12T05:44:42.377 回答
2

问题

react-native-web 不完全支持一些组件，如 react-navigation、pickler、联系人访问器组件等，并且在构建 Web 输出时您将收到模块/组件未解析错误！要处理这个问题，最好的方法是将代码（组件）分成 4 个部分（文件夹）：

   project-folder/
       android/
       ios/
       web/
       common/

您将在 common 文件夹中编写所有平台支持的组件，并在其自己的文件夹中编写一些特定于平台的组件。

作为开发人员，我认为您将在渲染中使用大量条件和代码，并且代码库将大到令人困惑！

另一个问题是 Web 应用程序的响应能力，很多年前，我们试图让桌面制作的网站在移动屏幕上响应地呈现。这些天来，我们正在尝试使移动网站在桌面屏幕上具有响应性，而不是在桌面屏幕上有很多响应space-between！

其他方法

  1. 您可以使用 react-native 开发仅适用于 ios 和 android 的应用程序，并使用 HTML、JS 或 reactjs 开发网站。

  2. 您可以开发可通过 android 和 ios 浏览器安装的 PWA 网站，并可以存储数据以供离线使用。

于 2020-06-17T12:43:05.887 回答