禁用远程调试时应用程序在启动时崩溃

我正在尝试在我的手机（iPhone）上安装我的反应本机应用程序。它安装正常，但在启动时崩溃并显示此错误消息 -

undefined is not an object (evaluating 'navigator.userAgent.indexOf')

<unknown>
     :12:71
loadModuleImplementation
    require.js:213:12
<unknown>
    getScrollPosition.js:12:31

如果我随后启用远程 js 调试，它会重新加载并且一切正常。我禁用远程调试，应用程序又崩溃了。知道这里会发生什么吗？

更新 - 罪魁祸首代码位于 fbjs 包中 -https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/dom/getDocumentScrollElement.js https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/dom/getDocumentScrollElement.js

他们检查是否navigator是否已定义，然后尝试访问其第二级属性 -navigator.userAgent.indexOf.

我可以假装navigator.userAgent或者向 fbjs 发送 PR。

navigator https://developer.mozilla.org/en-US/docs/Web/API/Window/navigator是浏览器中可用的全局 Web API。这在 React Native 中不可用，因为它不是 Web 浏览器。并非所有 Web API 都是全局环境的一部分。这就是为什么navigator.userAgent.indexOf正在抛出undefined error.

现在你的程序在远程调试 JS 时运行良好的原因是，当你远程调试时，React Native 会切换到使用 Chrome 提供的 JavaScript 引擎（或者你正在调试的任何东西），而不是核心引擎。因此，在调试时，您将可以访问浏览器通常具有的全局 Web API。

这是一个非常棘手的问题，经常会让人陷入困境，因为大多数人在开发时都一直打开调试。经验法则：React Native 不是浏览器。不要使用您在进行 Web 开发时通常使用的任何全局变量，这样您就可以避免大多数此类类型的陷阱错误。

如果您想了解如何在 React Native 的 JavaScript 引擎中填充这些全局变量（通常使用空对象），您需要查看初始化Core.js https://github.com/facebook/react-native/blob/master/Libraries/Core/InitializeCore.js。在这里你可以看到React Native将会polyfillnavigator像这样：

// Set up Geolocation
let navigator = global.navigator;
if (navigator === undefined) {
  global.navigator = navigator = {};
}

// see https://github.com/facebook/react-native/issues/10881
polyfillObjectProperty(navigator, 'product', () => 'ReactNative');
polyfillObjectProperty(navigator, 'geolocation', () => require('Geolocation'));

Edit:回答后续并给出解决方法。

您可以对其进行填充，但您需要在导入任何其他文件之前执行此操作index.js（您的应用程序的根目录）。这是它是如何完成的node-libs-react-native https://github.com/parshap/node-libs-react-native#globals和他们的全局变量.js https://github.com/parshap/node-libs-react-native/blob/master/globals.js他们也在文件中设置了默认的用户代理字符串。对此进行调整，您可以通过执行以下操作来获得相同的结果：

1. 创建文件来保存垫片，globals.js:

   global.navigator.userAgent = 'React Native';
   

2. 在导入任何其他文件之前导入/需要它index.js:

   import { AppRegistry } from "react-native";
   import globals from "./globals";
   import App from "./App";
   
   AppRegistry.registerComponent("RNSandbox", () => App);
   

如果出于某种原因你想要userAgent为了有所不同或取决于您是否正在调试，您可以将自己的逻辑添加到globals.js.