使用 React Native 运行 Firebase 3.0 时出错

Question

刚刚使用 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)

Answer 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 的作者）

Answer 2

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

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

Answer 3

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

见release notes。

Answer 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');

Answer 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 为您工作。

Answer 6

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

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