Instagram、Tesla、AirBnB、Di​​scord、Bloomberg都有用 React Native 编写的生产应用程序。我会让你自己决定它是否在你看来可以生产。

虽然 React Native 使您能够在 iOS 和 Android 之间进行重要的代码重用（我们目前正在为客户端构建一个应用程序，该应用程序来自外部库 - 在 iOS 和 Android 之间重用超过 99% 的代码），但它并非旨在与 React webapps 共享代码.

在Facebook的理念与本土做出react，而不是一次编写，到处运行是相当学习一次，写的任何地方。

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

更新： 2018 年 Airbnb 决定在他们的生产应用中停止 React Native。他们写了一篇关于他们的经验和推理的有见地的文章。对于任何考虑使用 React Native 的人来说，这都非常重要。https://medium.com/airbnb-engineering/react-native-at-airbnb-f95aa460be1c

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

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

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

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

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

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

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

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

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

设置共享项目

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

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

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

使用create-react-app内部创建react应用程序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)

取决于以下关键点

• 遵循编码指南标准
• module化开发
• 基于组件的开发
• 可共享代码的隔离
• 和代码设计（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

您可以查看 ReactXP ( https://microsoft.github.io/reactxp/ )，它使用 reactjs 和 react native 来构建跨平台应用程序。

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

总而言之，您可以在 React 和 React Native 之间获得大量代码共享，但不要过度使用共享的内容。这样做可能会使您的代码更难维护，因为您试图过度简化移动和网络之间的有效差异。

就我个人而言，这是沿着以下路线：

共享：

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

网络/移动特定：

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