在 React.js 和 React Native 应用程序之间重用代码答案

【问题标题】：Reuse code between React.js and React Native applications在 React.js 和 React Native 应用程序之间重用代码
【发布时间】：2015-07-20 16:51:58
【问题描述】：

我想重用一些从 API 中为两个应用检索数据的代码。一个是使用 React Native 的 iOS 应用程序。另一个是使用 React.js 的网站。

当我构建 iOS 应用程序时，我最初编写了从 API 检索数据的类。因此，我使用了 React Native 中可用的 fetch 方法。

不幸的是，React.js 中没有这样的方法。如果我想重用我的代码，我最好的选择是通过使用方法 fetch 创建一个类 HTTPRequests 来抽象 React Native 的 fetch 方法的调用，该方法将调用 React Native 的 fetch 方法或 '$ .get' 方法取决于项目使用的库：React.js 或 React Native。

我的问题如下：如何在我的项目中检测到 React.js 或 React Native 的使用。我的第一个想法是检测我的 JS 代码是通过 RCTRootView 引擎还是浏览器执行的。但我不知道如何做到这一点。

有什么建议吗？

谢谢！

【问题讨论】：

浏览器中有实现fetch API的库，例如：github.com/github/fetch。

标签： javascript reactjs react-native

【解决方案1】：

我的建议是将共享逻辑移动到单独的模块（bower、npm、ES6）中，概括您通过 fetch polyfill 请求数据的方式，并且永远不要费心在项目中检测 React/React.native。当新版本的 React/React.native 出现时，JS 代码检测将使您的代码变得不必要的复杂和难以支持。

【讨论】：

是的，你是对的。我终于设法不必根据我使用的库创建两个案例。
我很好奇您是如何创建共享文件的？你用browserify？
@AndyB 我的经验法则是一个单独的 npm 包，你甚至可以在你的 package.json 中使用本地依赖 docs.npmjs.com/files/package.json#local-paths 和 npm 2.0，我还建议使用 linklocal 包来开发使用跨度>
@EugeneSafronov，干杯！！我不会对浏览器中的导出有任何问题吗？ IE。 module.exports = MyModuleName;
@AndyB 在浏览器中，您将需要 browserify 或 webpack。他们都了解节点的导出样式或模块 API（使用 babel）

【解决方案2】：

我有使用 React Native 的platform-specific extensions 功能使用 React 和 React Native 构建跨平台应用程序的成功经验。我刚刚在一篇博文Code sharing between React and React Native applications

中描述了我如何构建代码以实现这一目标

【讨论】：