React Native Firebase 集成指南：从零开始构建跨平台应用

任凝俭

于 2025-06-03 09:09:51 发布

阅读量240

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00503/article/details/148393486

React Native Firebase 集成指南：从零开始构建跨平台应用

react-native-firebase invertase/react-native-firebase: 是一个用于 React Native 的 Firebase 集成库，可以方便地在 React Native 应用中集成 Firebase 服务。适合对 React Native、Firebase 和想要实现 React Native 与 Firebase 集成的开发者。项目地址: https://gitcode.com/gh_mirrors/re/react-native-firebase

前言

React Native Firebase 是 React Native 生态中功能最完善的 Firebase 集成方案，它为开发者提供了在 Android 和 iOS 平台上使用 Firebase 服务的完整支持。本文将详细介绍如何将 React Native Firebase 集成到你的项目中，无论你是使用 Expo 还是 React Native CLI。

核心概念

模块化架构

React Native Firebase 采用模块化设计，核心是 @react-native-firebase/app 模块，这是使用任何 Firebase 服务的基础。其他功能如认证、数据库、分析等都需要单独安装对应的模块。

平台差异处理

React Native Firebase 优雅地处理了 Android 和 iOS 平台的配置差异：

Android 使用 google-services.json 配置文件
iOS 使用 GoogleService-Info.plist 配置文件

环境准备

基础要求

已配置 React Native 开发环境
已创建 Firebase 项目
macOS 用户需要 Xcode 15.2+ (macOS Ventura 13.5+)

Expo 项目集成

开发构建要求

Expo 项目中需要使用开发构建(development build)，因为预编译的 Expo Go 应用不包含 React Native Firebase 所需的原生代码。

安装步骤

安装基础模块：

npx expo install @react-native-firebase/app

安装功能模块（示例）：

npx expo install @react-native-firebase/auth @react-native-firebase/crashlytics

配置示例

修改 app.json 文件：

{
  "expo": {
    "android": {
      "googleServicesFile": "./google-services.json",
      "package": "com.mycorp.myapp"
    },
    "ios": {
      "googleServicesFile": "./GoogleService-Info.plist",
      "bundleIdentifier": "com.mycorp.myapp"
    },
    "plugins": [
      "@react-native-firebase/app",
      "@react-native-firebase/auth",
      "@react-native-firebase/crashlytics",
      [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"
          }
        }
      ]
    ]
  }
}

构建注意事项

执行预构建：
```
npx expo prebuild --clean
```
如果之前安装过开发构建，需要先卸载再重新构建

React Native CLI 项目集成

基础安装

安装核心模块：

npm install --save @react-native-firebase/app

Android 配置

从 Firebase 控制台下载 google-services.json 并放置在 android/app/ 目录

修改 android/build.gradle：

dependencies {
  classpath 'com.google.gms:google-services:4.4.2'
}

修改 android/app/build.gradle：

apply plugin: 'com.google.gms.google-services'

iOS 配置

从 Firebase 控制台下载 GoogleService-Info.plist
通过 Xcode 添加到项目中

修改 AppDelegate 文件：

Swift 项目：

import Firebase
FirebaseApp.configure()

Objective-C 项目：

#import <Firebase.h>
[FIRApp configure];

修改 Podfile：

use_frameworks! :linkage => :static
$RNFirebaseAsStaticFramework = true

构建项目

# Android
npx react-native run-android

# iOS
cd ios/
pod install --repo-update
cd ..
npx react-native run-ios

高级配置

SDK 版本覆盖

Android

在 android/build.gradle 中：

project.ext {
  set('react-native', [
    versions: [
      android: [
        minSdk: 21,
        targetSdk: 33,
        compileSdk: 34
      ],
      firebase: [
        bom: "33.13.0"
      ]
    ]
  ])
}

iOS

在 Podfile 顶部添加：

$FirebaseSDKVersion = '11.12.0'

性能优化

在项目根目录创建 firebase.json：

{
  "react-native": {
    "android_task_executor_maximum_pool_size": 10,
    "android_task_executor_keep_alive_seconds": 3
  }
}

常见问题

iOS 兼容性问题：
- Flipper 与 use_frameworks 不兼容，需要禁用
- 新架构(Fabric)部分兼容 use_frameworks
Expo 开发构建：
- 安装 React Native Firebase 后必须重新构建
Web 平台支持：
- 需要动态初始化 Firebase 配置