是的！...

Question

我正在建立一个webapp和ios / android（同一个应用程序）。起初我认为cordova可能是一个不错的选择，然后在阅读后我认为React-native可能是更好的选择。

我的问题是：我是否必须两次编写相同的应用程序（一个针对网络做出反应，另一个针对移动设备做出反应）？

我已经看过一些可以分享网络反应原生成分的图书馆，但我觉得我会受到限制。

你怎么看？

编辑：还有一个问题有了反应，我会使用flux（现在可能是redux）我应该做些什么来保持我的本机应用程序的清洁和可读性，我的意思是我应该如何在那里管理数据呢？谢谢你的回答

Answer 1

现在做同样的事情 - 我没有共享代码库，因为网络/移动应用程序的内容不同 - 我使用网络管理和移动应用程序来查看内容。

Answer 2

React native使用本机视图UIView，Text等进行显示。您不能拥有相同的代码库。 React native使用flex box（它有自己的实现），因此也不适用于web反应项目。

唯一的办法就是让它们保持独立。而Web和App也会有不同的设计。

Answer 3

虽然确实无法使用完全相同的代码进行反应本机和反应JS，但您可以构建代码库以尽可能多地重用代码。看看这个项目：

https://github.com/benoitvallon/react-native-nw-react-calculator

Answer 4

现在你无法共享代码库b / w React Native / React代码，因为一个依赖于本机UI代码和其他html DOM。有一个有趣的项目将两者结合起来（https://github.com/necolas/react-native-web），但它绝不是生产准备好的。

Answer 5

我知道这可能是一个迟到的答案，但将来会有所帮助。检查https://github.com/este/este，它有不同的移动，Web和服务器堆栈。您可以在公共文件夹中使用常用组件。它使用firebase作为后端服务，但您可以更改为任何服务。

Answer 6

您实际上可以在React-Native中使用WebView组件使用相同的代码。

这是一个链接： https://facebook.github.io/react-native/docs/webview.html

Answer 7

React Native依赖于Native UI代码而不是html，这意味着必须重写所有视图组件。但是，如果您将所有逻辑都放在Web应用程序中的“哑”功能组件之外，那么您应该能够重用大部分Web代码。

例如，您可能有一个外部容器，它使用componentDidMount处理您想要在mount上发生的任何事情，处理和定义onClicks，并确定要呈现的视图组件。这个代码在Web和移动设备中可以完全相同，然后您的“哑”功能视图组件会有所不同，因为一个使用本机视图元素而另一个使用HTML。

Answer 8

网络应用和本机应用的代码可以相同（或者您可以使用WebView包装作为应用）。我想你会问，因为两个接口的功能都是一样的。外观和感觉可以（几乎）相同。

如果您将应用仅视为视图，则可以与多个平台共享后端（控制器和型号）。您还可以尝试后端即服务，如Firebrand或Parse。对于redux部分，这不是一个真正的答案，但这是一个很容易获得kickstart的方法。

Answer 9

我绝对认为你可以重用一些代码。如果您正在使用redux，如果您有一些复杂性，那么您可能会使用redux - 诸如动作和减速器之类的东西很容易重复使用。虽然UI组件本身不可重用，但您总是可以重用一些支持它的东西。就像timvp提到的那样，你也可以使用WebViews来重用代码，但我不建议这样做，因为它总是与本机模块没有相同的性能。

Answer 10

我建议你看看Redux架构。

您可能会获得以下文件夹架构：

.
└── src
    ├── actions
    ├── components
    ├── containers
    └── reducers

如果组织好代码，react-native特定组件将只位于组件文件夹中。

所有逻辑甚至组织都是可重用的。

您将使用普通html而不是本机组件重写组件。还有应用程序入口点，因为它们是不同的，但我发现这不是一个非常大的问题。

更多redux示例https://github.com/reactjs/redux/tree/master/examples

回答第二个问题：Redux是州（数据）经理。它以单向方式流动。

例如，您如何处理用户点击？

从组件
容器（包含逻辑）调度操作（比如BUTTON_CLICK）
Reducer以当前状态接收BUTTON_CLICK，只有相关的会更新应用程序状态（例如：增加一个计数器）
更新状态时，渲染树运行

以下是redux flow https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6#.z0bcil3i0

为了更好地理解为什么这个混乱很棒，请阅读http://redux.js.org/

Answer 11

您可以在React和React Native之间共享大部分代码（特别是如果您使用react-native-web。

试试这篇文章：http://jkaufman.io/react-web-native-codesharing/ 它给出了一个非常巧妙的例子，说明了如何做到这一点。

我强烈建议您保留大部分域逻辑（API调用，通量，甚至智能组件处理逻辑）并仅重写处理视图的哑组件，以便您可以为桌面或移动实现最佳的UX

您可以像下面这样命名您的哑组件视图文件：

MyComponent.js（适用于您的网络应用） MyComponent.native.js（适用于您的原生应用）或MyComponent.ios.js＆amp; MyComponent.android.js，如果您根据平台有不同的视图。

Answer 12

简短的回答是......

是的！...

您需要编写2个代码库，但请继续阅读更长的答案。

使用React的某些功能创建

React Native 以编码Application，而创建 React 以执行网站和Web应用程序，因此它们在性质，语法和图书馆都使用，所以基本上你需要重写你应用程序的某些部分，我可以说 20％到 70％％，这实际上取决于。

我将 React Native 和 React 与来自两者的一些代码示例进行比较，您可以检查差异，但只是让您知道，对于实际的应用程序，差异可能比你在这里看到的要多得多：

React Native

React Native允许您仅使用构建移动应用程序   JavaScript的。它使用与React相同的设计，让你组成一个   来自声明组件的丰富移动UI。

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      <View>
        <Text>
          If you like React on the web, you'll like React Native.
        </Text>
        <Text>
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        </Text>
      </View>
    );
  }
}

更多信息here

阵营

React使创建交互式UI变得轻而易举。设计简单的视图   对于您的应用程序中的每个状态，React将有效地更新   并在数据发生变化时呈现正确的组件。

声明性视图使您的代码更易于预测且更易于调试。

import React, { Component } from 'react';

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        <p>If you like React Native on the devices, you'll like React.</p>
        <p>You just use web components like 'div' and 'span',
         instead of native components like 'View' and 'Text'.</p>
      </div>
      );
   }
}

ReactDOM.render(<HelloMessage name="Jane" />, mountNode);

更多信息here

Answer 13

我想知道为什么没有人提到ReactXP。 ReactXP是由Microsoft 维护的库，可让您使用React创建web，ios，andoid和Windows应用程序：

XP意味着X-Platform 在Web，iOS，Android和Windows之间共享大部分代码。

https://microsoft.github.io/reactxp/

提到的其他选项是

https://github.com/necolas/react-native-web

https://github.com/este/este

Answer 14

React Native仅适用于应用程序，它生成完全本机组件，React Native具有其组件的特定语法。使用一些软件包将React Native代码库加入到web中将是不值得的，因为您将受到限制，并且您反对React Native流程，它与将Swift或Java编写的应用程序转换为Web程序包相同。它不是最优和有限的。

这是您学习javascript和使用React（或您选择的任何其他库/框架）的美丽，您可以使用Web体验编写最好的Web应用程序，同时使用您在JS上的知识，您可以提供完全本机体验到你的应用程序。

这就是接近做网络和原生的关键 - 你可以使用相同的核心语言，并在这两个世界提供最好的体验。

Answer 15

我试图做同样的事情。 RN与React不完全相同，您必须处理原生视图，例如：Text，View，ScrollView，ListView等，除此之外，它们是几乎一样。

所以，您可以像这样组织代码： root src lib // code for all other three platform android // code for android only ios // code for ios only web // code for web only index.js //for web index.ios.js // for ios index.android.js // for android

Answer 16

您可以使用相同的JavaScript代码共享业务逻辑（只需复制代码即可）。另一方面，由于硬件的特性，为Web（主要在台式机/笔记本电脑浏览器上）和移动（本机）上使用不同的表示层是完全正常的。

您可以以react-spa-jwt-authentication-boilerplate（*）为例。它通过保留common-logic文件的精确副本，通过名为*.js的文件夹在Web版本和本机版本之间共享“业务逻辑”。另一方面，导航和表示层不同。它实现了一个示例身份验证过程，该过程本身也可以用作新项目的基准。

（*）Disclimer：我是仓库的实现者。我们确实需要实施回购协议，以减少移动和Web应用程序之间的开发时间。

React-native和React

16 个答案:

是的！...

React Native

阵营