【问题标题】：Can react js web code be used for building mobile apps using react native?react js web代码可以用于使用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 组件支持更多的内置渲染灵活性）

标签： reactjs web 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交互移动到数据层，让视图只是一个视图。

【讨论】：