react js web代码可以用于使用react native构建移动应用程序吗？

Posted 2023-03-21

【中文标题】react js web代码可以用于使用react native构建移动应用程序吗？

【英文标题】：Can react js web code be used for building mobile apps using react native?

【发布时间】：2017-04-29 07:48:07

【问题描述】：

我正在开发一个宠物项目（网络应用程序），我想知道是否应该使用 react，因为从这段代码创建本机应用程序很容易（如果我需要的话，将来会）。

如果答案是肯定的，那么最佳实践是什么？ 重用率最高？

如果答案是否定的，你能推荐一个替代方案吗？

关于我的情况的更多信息。

我对反应比较陌生，我的替代方案将是带有 bootstrap 和 jquery 的好的 ol' html。我正在考虑使用 asp.net mvc 和 web api。

【问题讨论】：

有github.com/necolas/react-native-web，但它的工作方式相反..构建 React-Native 并稍后创建网页

有可能。我建议你阅读Sharing Code between React Web and Native Apps

就像@atlanteh 所说，该框架存在。 React-Native 没有“DOM”，但可以使用 DOM 创建 React Native 中使用的相同组件。 （浏览器提供了比 React Native 组件支持更多的内置渲染灵活性）

【参考方案1】：

在 React Web 应用程序和 React Native 应用程序之间共享应用程序逻辑，同时保持每个平台唯一的单个组件呈现是可能的！

在我看来，这是我们提供的一个很好的选择。我会给你一个方法的概述和一些建议。

在理想情况下，我们将能够共享 100% 的代码。据我所知，这是不可能的，但我们仍然可以共享很多代码。虽然 React Native 和 React 很像，但需要注意的是，渲染代码不同。取而代之的是 <div> 或 <span> 之类的 Web 内容，您可以使用 <View>、<Text> 等 React Native 组件和其他内置组件。

然而，在大多数情况下，业务逻辑只是 javascript，这是我们可以分享的重要内容之一！

计划

根据您使用的 Flux 架构，这意味着您的 store、reducer、action 以及大部分业务逻辑（内部服务或其他）以及常量和实用程序都是共享代码.

然后将使用 React Native 为每个原生平台专门编写 UI 层，并使用 React 为 Web 编写 UI 层。不仅因为有必要用 React Native 组件替换 HTML 元素，还因为这些组件在移动应用上可能会有非常不同的行为。

一些一般准则/建议

考虑一个良好的架构和代码结构，以便尽可能多地共享代码（和应用程序逻辑）。尝试分离 UI 呈现组件（每个平台会有所不同）。

查看 React Native 文档中的 JavaScript Environment specifics。使用 React Native 时，您将在两种环境中运行 JavaScript 代码：

在 ios 模拟器和设备、android 模拟器和设备上。 React Native 使用 JavaScriptCore，它是支持 Safari 的 JavaScript 引擎。在 iOS 上，JSC 不使用 JIT，因为 iOS 应用中没有可写的可执行内存。 在使用 Chrome 调试时，它会在 Chrome 本身中运行所有 JavaScript 代码，并通过 WebSocket 与本机代码进行通信。所以你使用的是 V8。

虽然这两种环境非常相似，但您最终可能会遇到一些不一致的情况。

考虑共享代码的不同策略。为了访问共享代码，您正在构建的应用程序不必全部位于同一个代码库或 git 存储库中。

更实际地，您将分别托管两个或多个项目，因此 npm 包是在它们之间共享代码的最简单方法之一。

这很容易，就像制作一个新包并将其设置为每个项目中的依赖项一样。对于共享项目的路径，您可以使用 git 存储库，而不是指向 npm 上的公共包。

即使您现在只构建 Web 应用程序，您也可以花一些时间考虑如何概括一些共享代码，这样将来重用它会更容易.

【讨论】：

这很好地回答了这个问题，但是仅仅为移动设备重新使用 ReactJs 代码而不是重写一堆东西有什么问题？

谢谢。这绝对有帮助

@MartinMazzaDawson 这是不可能的，因为 Web 和移动设备的渲染代码不同。取而代之的是 <div> 或 <span> 之类的 Web 内容，在移动设备上，我们使用 React Native 组件，例如 <View>、<Text> 和其他代表移动设备特定项目的内置组件。

【参考方案2】：

这是可能的和可行的。您必须对每个平台（web/android/ios）都有一个视图，因为每个平台都有您的组件..

业务逻辑必须在视图之外。使用flux可以让你的项目更容易与native，因为它将api交互移动到数据层，让视图只是一个视图。