我们可以在react webapp之间共享代码并对本机应用程序做出反应，并准备好本地生成反应

时间：2017-05-09 12:21:39

标签： reactjs react-native

我们有一个使用reactjs开发的小部件的稳定版本。我们想开发相同的移动版本。使用react native进行开发并在2个应用程序之间共享代码是否更好？或者我们本地开发小部件更好。

请记住，我们确实拥有（反应和Android开发）方面的专业知识，但我们不想投入太多时间再次开发整个应用程序。

如果我们选择react-native，是否有任何工具/资源可以更快地完成这项工作？

在线提供的资源：

http://jkaufman.io/react-web-native-codesharing/

https://arielelkin.github.io/articles/why-im-not-a-react-native-developer.html

https://medium.com/@felipecsl/thoughts-on-react-native-from-an-android-engineers-perspective-ea2bea5aa078

干杯!!!

10 个答案:

答案 0 :(得分：11)

Instagram, Tesla, AirBnB, Discord, Bloomberg都有使用React Native编写的生产应用程序。在您看来，我会让您自己决定是否已准备就绪。

虽然React Native可以让您在iOS和Android之间重用代码（我们目前正在为客户端构建应用程序 - 从外部库中获取 - 在iOS和Android之间重用超过99％的代码），但它并不是为了共享代码而设计的使用React webapps。

Facebook的React Native理念，而非一次编写，随处运行，相当学习一次，随处写。

您绝对可以使用您的设计和架构，但您需要重写大部分代码。但是，它可能比开发两个独立的Java和Obj-C / Swift应用程序更有效。

更新：2018年，Airbnb决定在其制作应用中落实React Native。他们写了一篇关于他们的经历和推理的富有洞察力的文章。对于任何考虑使用React Native的人来说都非常重要。 https://medium.com/airbnb-engineering/react-native-at-airbnb-f95aa460be1c

答案 1 :(得分：6)

你可以查看ReactXP（https://microsoft.github.io/reactxp/），它使用reactjs并做出本机反应来构建跨平台应用程序。

答案 2 :(得分：3)

您不能只将整个代码用于react-native应用程序。首先，您必须遵循react-native架构，然后使用react-native组件开发UI。

您肯定必须为移动应用程序和网络应用程序分别编写组件。但是您始终可以重用业务逻辑API通讯层。

创建可重用组件并将其共享到Shared文件夹中，然后在任何地方重用Mobile / Web。

将反应转换为本机平台是一个简单的过程。逐步过程如何在React Native中重用代码，在图像中以React Native Web视图作为介绍的新娘react-hooks

进行解释

分步指南如何操作 React vs React Native的可重用性和我们在React和React的本机代码之间可以实现的可重用性百分比将在下一部分中说明

React和React Native之间的共享代码：

  • 业务记录器
  • 与API通讯
  • 商店，减速器，动作和服务
  • 助手，常量，存储服务
  • HOC（高阶组件）
  • 特定于移动/网络：

分别用于移动和网络的专用代码（特定代码）

  • 修饰性成分
  • 导航/路由
  • 样式

设置共享项目

确保您位于项目的根文件夹

$ mkdir -p packages/components/src packages/mobile packages/web

使用“ {packages / mobile”中的react-native-cli创建React Native项目

在create-react-app内使用packages/web创建React应用

在根目录中创建package.json以启用纱线工作区

创建共享文件夹

现在创建一个公共或共享文件夹，其中将存在React和React Native的通用代码。

$ mkdir -p packages/common

在公用文件夹中创建package.json文件

命名包并添加主文件（条目文件）

配置React Web应用程序

在您的react-app-rewire-yarn-workspaces的开发依赖项中添加react-app-rewired和web/package.json

将脚本从react-scripts更改为react-app-rewired 

"start": "react-app-rewired start"

"build": "react-app-rewired build"

"test": "react-app-rewired test --env=jsdom"

"eject": "react-app-rewired eject"

Add config-overrides.js inside web

配置React Native Mobile应用

在mono repo上配置react-native有点棘手。在使工作区在React Native应用程序中工作之前，我们需要了解两件事。

  • 符号链接
  • 没有葫芦

符号链接

符号链接是包含对另一个文件或软件包的引用的任何文件的术语。为了实现符号链接，我们将使用wml。

最后

创建可重用组件并在Shared文件夹中共享，然后在任何地方重用Mobile / Web。

从Web（响应）迁移到移动（React Native）或从Mobile（React Native）迁移到Web（React）

取决于以下关键点

  • 遵循编码准则标准
  • 模块化开发
  • 基于组件的开发
  • 可共享代码的隔离
  • 和两者（Web或移动）的代码设计或与示例图片不一样

在这里，我尝试提供一个简单的解释，说明如何使用react-native在React和react-native-web 之间共享代码。未来几天，我还将在此处添加convert react native app to web的详细过程指南（逐步指南）。

Code difference to migrate from ReactJS to ReactNative

从React迁移到React Native

结论-根据我的理解并基于上述几点，我可以说您可以将20％至50％的React JS代码重用于React Native平台

从头开始开发

结论-根据我的理解并根据上述几点，我可以说您可以将50-70％的React JS代码重用于React Native平台

References website - Codingular

References website - Jkaufman

答案 3 :(得分：2)

它可以在移动应用和网络应用之间共享。您肯定必须再次为移动应用编写组件。但是你总是可以重用业务逻辑。

如果您在Web应用程序中使用了React，那么工作就会变得更加容易。 React native的主要危害之一是状态管理。现在复杂性取决于您的应用程序。通常建议将Redux与React Native一起使用。

真正的问题是你可以分享多少代码。希望这有帮助。

答案 4 :(得分：1)

现在有一个名为react-native-web的工具，可让您在网络和移动设备之间共享代码。

了解详情：https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/

回购：https://github.com/necolas/react-native-web

答案 5 :(得分：1)

我并没有在这个问题上过多夸张，而是在https://dev.to/kylessg/a-sensible-approach-to-cross-platform-development-with-react-and-react-native-57pk上写了一篇相当深入的指南。

不过，总而言之，您可以在React和React Native之间获得大量的代码共享，但不要过度共享您的共享内容。这样做可能会使您的代码难以维护，从而导致您试图过度简化移动设备和网络之间的有效区别。

对于我自己，这是遵循以下原则的：

共享：

  • 业务逻辑
  • 与API通讯
  • 将可能的共享功能填充到API中（例如与分析，本地存储，网络检测等进行通信）
  • 商店，reducers应用程序操作
  • HOC

特定于网络/移动设备：

  • 修饰性成分
  • 导航/路由
  • 样式

答案 6 :(得分：0)

您当然可以分享存储和网络层，而不是网络和移动设备反应代码库 虽然实际上您只能共享存储层的一部分，但是在移动应用和Web应用的情况下，您可能希望以不同方式获取数据。

答案 7 :(得分：0)

解决Web，iOS，Android和Windows上的代码共享的两个流行选项是

  1. 反应本机Web-https://github.com/necolas/react-native-web
  2. ReactXP-https://github.com/microsoft/reactxp

下面是https://microsoft.github.io/reactxp/docs/faq.html的精彩摘录，着重说明了差异。

ReactXP与React Native for Web有何不同？

React Native for Web是一个由Twitter的工程师开发的开源库。在React Native for Web可用之前，我们开始实施ReactXP。

这两项工作的目标相似，但是方法不同。 ReactXP是位于React Native和React之上的一层，而Web的React Native是React Native的并行实现—是iOS和Android的React Native的同级产品。

ReactXP通常只公开所有平台上可用的道具，样式属性和API。如果您编写ReactXP的抽象，您将很有信心它将以相同的方式在所有受支持的平台上运行。使用适用于Web / iOS / Android的React Native可以实现相同的目的，但是您需要更加小心使用的组件，道具和API。

答案 8 :(得分：0)

直到今天，这种哲学仍然保持不变，即到处学习一次。正如在其他帖子中非常正确地指出的那样，react和react-native都是基于JavaScript的，通过一种架构设计方法，您可以共享您的业务逻辑。

另一方面，由于硬件的特性，为Web（主要在台式机/笔记本电脑浏览器上）和移动（本机）上使用不同的表示层是完全正常的。

该问题要求提供一种可以加快开发过程的工具。为此，可以将这个名为react-spa-jwt-authentication-boilerplate（*）的github存储库用作示例。通过保持准确的名称，它通过一个名为common-logic的文件夹在Web版本和本机版本之间共享“业务逻辑” *.js个文件的副本。另一方面，导航和表示层不同。它实现了一个示例身份验证过程，该过程本身也可以用作新项目的基准。

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

答案 9 :(得分：0)

是的，我们可以重复使用代码。而且效果很好。 这是一个示例应用程序存储库 https://github.com/spoman007/reactXstarter

相关问题
最新问题