检测是否使用 nextJS、react 或 react-native答案

【问题标题】：Detect if using nextJS, react or react-native检测是否使用 nextJS、react 或 react-native
【发布时间】：2020-05-05 03:01:31
【问题描述】：

我正在构建一个使用 React 应用程序的库。由于它将在 React 生态系统中运行，因此某些功能将根据环境而有所不同。

我正在寻找一种方法来检测当前环境是否是 ReactJS 应用程序（例如使用 create-react-app 制作），或者它是否在其上使用 NextJS 进行 SSR，或者它是否是制作的移动应用程序使用 React Native。

是否存在了解此信息的 javascript 方式？

谢谢你:)

【问题讨论】：

您希望根据开发环境修改哪些功能？
很难完全解释我将要更改的内容，但基本上它的工作方式因环境而异，因为 lib 在 ReactJS 上使用异步存储（在 RN 上）和 js-cookie ，但如果代码在nextJS的服务器端执行，也要处理。
您可以使用状态管理器来满足您的存储需求吗？例如，Redux 为在所有三个平台上工作提供了很好的解决方案。
公开一个你的消费者将指定模式的道具
@Fantasim 对于它的价值，redux-persist 现在要求 RN 用户显式传入存储容器。看起来所有here 都有getItem、setItem 和removeItem 方法。这可能是开发人员和用户摩擦最小的解决方案。

标签： javascript reactjs react-native next.js

【解决方案1】：

要检查您的代码是否在 react native 中运行，您可以使用 navigator.product。 React Native 将 navigator.product 作为“ReactNative”返回。这是已实施的提案的链接。 https://github.com/facebook/react-native/issues/1331

要检查您的代码是否在 NextJS 或浏览器中运行，您可以检查是否定义了 window 对象或 document 对象。在 nodeJS 下，window 是未定义的。

React Native 定义了常见的浏览器对象，例如窗口和文档，以确保目标浏览器的库可以正常工作。这是代码的链接。 https://github.com/facebook/react-native/blob/master/Libraries/Core/InitializeCore.js

【讨论】：