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

Question

我们有一个使用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

干杯!!!

Answer 1

Instagram,特斯拉,AirBnB,Discord,Bloomberg都有用React Native编写的制作应用程序.我会让你自己决定它是否适合您的生产.

虽然React Native可以让你在iOS和Android之间重用代码(我们目前正在为客户构建一个应用程序 - 从外部库中获取 - 在iOS和Android之间重用超过99%的代码),但它不能与React webapps共享代码.

Facebook的React Native理念,而不是一次写入,在任何地方运行都是学习一次,随处写.

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

Answer 2

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

您当然必须为移动应用程序和 Web 应用程序分别编写组件。但是您始终可以重用业务逻辑、API 通信层。

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

将 react 转换为 react-native 平台是一个简单的过程。一步一步的过程如何在反应原生中重用代码解释图像中的反应原生网络视图作为引入的新娘 react-hooks

通过步指南怎么办阵营VS阵营本地重用 ＆什么可重用性，我们可以实现之间的反应，反应的本机代码的比例将在下面的部分解释。

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

• 业务日志
• 与 API 通信
• Stores、Reducers、Actions 和服务
• 助手、常量、存储服务
• HOC（高阶组件）
• 移动/网络特定：

Mobile & Web 的专用代码（特定代码）分开

• 展示组件
• 导航/路由
• 样式

设置共享项目

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

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

使用react-native-cli“packages/mobile”内部创建反应本机项目

使用create-react-app内部创建反应应用程序packages/web

package.json在根目录下创建以启用 Yarn Workspaces

创建共享文件夹

现在创建一个 common 或 shared 文件夹，其中将存在 react 和 react native 的通用代码。

$ mkdir -p packages/common

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

命名包并添加main（入口文件）

配置 React Web 应用程序

在您的开发依赖项中添加react-app-rewire-yarn-workspaces和react-app-rewiredweb/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 移动应用程序

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

• 符号链接
• 没有提升机

符号链接

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

最后

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

从 Web (React) 迁移到 Mobile (React Native) 或从 Mobile (React Native) 迁移到 Web (React)

取决于以下关键点

• 遵循编码指南标准
• 模块化开发
• 基于组件的开发
• 可共享代码的隔离
• 和代码设计（Web 或 Mobile）或不喜欢示例图像

在这里，我尝试了一个关于如何在 React 和react-nativewith之间共享代码的简单解释react-native-web。convert react native app to web在接下来的几天里，我将在这里添加详细的流程（分步）指南。

从 React 迁移到 React Native

结论-根据我的理解并依赖于以上几点，我可以说你可以将 20-50% 的 React JS 代码重用于 React Native 平台

从头开发

结论-基于我的理解和以上几点，我可以说你可以重用 50-70% 的 React JS 代码到 React Native 平台

参考网站 - Codingular

参考资料网站 - Jkaufman

Answer 3

您可以查看ReactXP(https://microsoft.github.io/reactxp/),它使用reactjs并做出本机反应来构建跨平台应用程序.