Question

碰巧看到React-Native-Web（RNW），我的想法是什么？为什么我们需要另一个Web版本的React？我们已经有了ReactJS（RJS）。

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

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

请问有人可以给我一些具体的例子和性能数据等吗？

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

谢谢

Answer 1

说实话，使用react-native-web的理由有些美感，举个例子：

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

另一方面，React的原语只是DOM节点-HTML标签   例如div，p或a，它们都不是纯UI。他们不是为了   定义一种视觉语言；相反，它们是为了结构和制造   超文本的感觉。 React的原语具有超越   界面，而这个意义在外面没有多大意义   浏览器。

，取自here。我开发了ReactJs和RN应用程序以及网站，我唯一能看到的真正好处就是统一编码语言。因为我从RN开始，然后将ReactJS添加到我的履历表中，所以我发现在ReactJs中找到等效的RN组件非常麻烦，哦，我应该使用p和span而不是Text ？，哦，把它拍成'输入类型=“ text”'不是'TextInput'等，我想您明白我的意思。对于进入RN世界的React开发人员来说可能是一样的。但是它也有其缺点，不幸的是，使用react-native-web需要一些麻烦，因此您必须为此准备项目。

感谢您的解释。你能更具体一点吗提供更多有关“麻烦”的细节或示例？谢谢！

例如，React-Native（及其某些库）基于不是标准JS的 Promise 框架，或添加了ES6的 Object.assign ，以便使用它们，您必须修改webpack.config.js，.bael-rc文件在这些文件内添加多行。如果您正在使用其他帮助工具，例如Flow或Jest等，则也必须对其进行配置。它肯定会使您开始时放慢脚步，但如果您花时间进行设置，从长远来看是值得的。

Answer 2

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

Answer 3

问题

react-native-web不完全支持某些组件，例如react-navigation，pickler，contacts访问器组件等，在构建Web输出时，您将得到模块/组件未解析的错误！要解决此问题，最好的方法是将代码（组件）分为4个部分（文件夹）：

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

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

作为开发人员，我将在渲染时使用很多条件和代码，并且代码库足够大令人困惑！

另一个问题将是Web应用程序的响应性。很多年前，我们试图使台式机网站能够在移动屏幕中响应性地呈现。这些天来，我们正在努力使移动网站在桌面屏幕上具有响应能力，而在桌面屏幕上没有太多space-between！

其他方式

您只能使用react-native来开发适用于ios和android的应用，而可以使用HTML，JS或reactjs来开发网站。
您可以开发可通过android和ios浏览器安装的PWA网站，并可以存储数据以供离线使用。

React-Native-Web与ReactJS

3 个答案:

问题

其他方式