使用 React Native 运行 Firebase 3.0 时出错

Posted 2023-02-22

【中文标题】使用 React Native 运行 Firebase 3.0 时出错

【英文标题】：Error when running Firebase 3.0 with React Native

【发布时间】：2016-09-15 15:46:19

【问题描述】：

刚刚使用 react-native 加载了 firebase 3.0 并收到错误

[致命][tid:com.facebook.react.RCTExceptionsManagerQueue] 未处理 JS 异常：找不到变量：文档

是否支持 react-native？

反应原生代码：

var firebase = require('firebase')

// Initialize Firebase
var config = 
    apiKey: '<apiKey>',
    authDomain: '<app>.firebaseapp.com',
    databaseURL: 'https://<app>.firebaseio.com',
    storageBucket: 'firebase-<app>.appspot.com'
;
firebase.config(config)

【问题讨论】：

您能展示实例化 Firebase 实例的代码吗？谢谢。

3.0.0 与开箱即用的 React Native 不兼容，我们正在对此进行调查。

3.0.2 也不兼容 React native(0.26.0)？我遇到了同样的错误。

3.0.3 仍然不兼容

firebase javascript SDK 3.1.0 的新版本具有 React Native 兼容性。 firebase.google.com/support/release-notes/js#3.1.0

【参考方案1】：

虽然 Firebase JS SDK 现在可以在 react-native 上工作，但它主要是为 web 构建的，通常不是 react-native 的最佳解决方案。

Firebase Web SDK 完全在 react native 的 JS thread 上运行，因此会影响您的应用程序帧速率（该链接很好地解释了这一点）。

在我的测试中，原生 firebase SDK 的速度大约比使用 Web SDK 快 2-3 倍。

但除了潜在的性能影响之外，还有很多功能您将无法在 android/ios 设备上与 Web SDK 一起使用。例如：

通知/FCM 离线功能 存储上传/下载 Firebase 崩溃报告 分析 使用社交身份验证提供程序

最好的方法是使用原生 android/ios firebase sdk 运行，并在它们和您的 js 代码之间架起一座桥梁（即原生模块设置）。

谢天谢地，您不必自己实现，已经有模块可以为您执行此操作：

react-native-firebase 例如镜像 web sdk 的 api js 端，但使用本机 android & ios firebase sdk 在本机端执行。它与您可能已经实现的任何现有 firebase js 逻辑完全兼容，旨在替代 web sdk。

（免责声明：我是 react-native-firebase 的作者）

【参考方案2】：

要将最新版本的 Firebase 与 ReactNative 结合使用，您可以使用 Firebase Bridge。

我有一个演示应用程序here。

【参考方案3】：

Firebase JS SDK 3.1 just got released 现在与 React Native 兼容！

见release notes。

【讨论】：

时机很好。谢谢。

如果有人想要更多指导，这里是 tutorial 用于 Firebase 电子邮件/密码身份验证，我为 Android 提供了 react native（同样的方法可以应用于 iOS）。

【参考方案4】：

RN 中不支持 Firebase 3.x（目前...）。

问题

我认为这个问题与 auth 模块对浏览器的 window 变量的依赖有关。

会得到官方支持吗？

根据 Firebase 团队的以下讨论主题，他们目前正在致力于 3.x 支持。但是，没有设定发布时间框架。

Google Groups Discussion.

解决方法

选项 1（使用 FB 2.x）

来自雅各布·温格：

如果 React Native 支持是你的障碍，请继续使用 2.x.x SDK，直到我们解决此问题。 2.x.x SDK 将 继续工作，即使在您迁移到新控制台之后..`

选项 2（使用 FB 3.x）

来自雅各布·温格：

如果您不需要身份验证，作为一种“解决方法”（我知道，不太可能，但仍然 值得一提），你应该能够做到以下几点：

var app = require('firebase/app'); var database = require('firebase/database');

【参考方案5】：

通过将以下内容放入 .js 文件并将其导入 index.ios.js 的顶部，我能够让 Firebase 3.0.2 加载到 React Native 中：

global.location = 
  href: ''
;
global.screen = 

;
global.document = 
  getElementsByTagName: function()
;
global.parent = global;

可能还有其他问题 - 我没有进一步探索，但它可能会让 Firebase 3 为您工作。

【讨论】：

我在 3.0.3 和 3.0.2 上都尝试了您的修复，但我仍然收到“不支持浏览器”错误屏幕。如果它对您有用，您可以发布更多代码吗？谢谢

【参考方案6】：

最新版本的 firebase 使用 Web 应用程序中使用的文档变量，而 RCTWebSocket 或 RCTView 的工作方式不同。 （我不是 100% 确定所有细节）。无论如何，您只需安装旧版本的 firebase 即可。假设您已安装 npm，请按照这些说明进行操作。

从您的 react-native 项目中卸载 Firebase npm uninstall firebase --save 安装 2.4.2 版的 firebase npm install firebase@2.4.2 --save Firebase 快乐！

【讨论】：

要提一提的是，当在新控制台中创建 Firebase 帐户时，用于 auth 的 2.4 npm 包不起作用。然后你得到以下错误：Projects created at console.firebase.google.com must use the new Firebase Authentication SDKs available from firebase.google.com/docs/auth/

如果我们使用其他仅在 Firebase 3 中可用的服务（如存储）会怎样？