为 React Native 设置 Firebase 项目

2020-10-17 08:00飞浪

介绍

Firebase 是开发移动和 Web 应用的最著名云计算平台之一。Firebase 为移动开发提供众多MBaaS服务，包括数据库（NoSQL 和文档）、文件存储、身份验证、崩溃报告、通知（FCM）、分析、托管、动态链接、远程配置、A/B 测试、机器学习等。

上传图片是应用开发中处理、存储和分享图片的常见功能。Firebase 提供了存储 API 服务来存储多媒体内容。Firebase 存储 API 最大的特点就是它的稳健性。它会根据网络强度自动暂停或恢复上传任务。

Firebase 服务也可以与 React Native 项目集成，但这需要特定于平台（Android 和 iOS）的设置和配置。为了涵盖所有内容，整个过程分为三个指南：

为 React Native 设置 Firebase 项目（本指南）
[在 React Native 中集成 Firebase 存储和图像选择器]（/content/ps/en/resources/blog/guides/integrate-firebase-storage-and-image-picker-in-react-native.html）
在 React Native 中将图像上传到 Firebase 存储

本指南介绍了在 Firebase 控制台中创建项目以及使用 Firebase 配置 React Native 项目的实施细节。完整的优化代码库可在RNFirebaseStorage存储库中找到。

先决条件

React Native 遵循 React 的开发结构和工具，因此本指南假设您具有以下技术和工具的基本知识。

技术

JavaScript 基础知识
HTML、对象和 EcmaScript 6（ES6 类和箭头函数等）

已安装的工具

Node.js
命令行界面 (CLI)
XCode 和CocoaPods（下一节将解释）

按照Android 上的 React Native 入门指南学习 React Native 开发的基础知识。

创建并运行 React Native 项目

第一步是创建一个 React Native 项目并设置运行环境：

创建一个 React Native 项目：

      npx react-native init RNFirebaseStorage

按照以下步骤创建 Android 虚拟设备 (AVD)
运行项目：

      cd RNFirebaseStorage
npx react-native run-android --verbose
# or to run iOS app
npx react-native run-iOS --verbose
    

上述命令过程可能会要求安装CocoaPods，它是 iOS 项目的依赖项管理器，是运行 iOS 应用程序所必需的。

在上面的命令中，--verbose是可选的，但对于查看任何潜在问题很有用，如下所示。

注意：请务必遵循本指南的已知 Gradle 问题部分来了解有关React Native 中InvokerHelper或gradle构建工具的问题。

添加 Firebase 依赖项

Firebase SDK 模块允许应用程序直接与 Firebase 服务器应用程序通信。react -native-firebase NPM 模块提供了使用 JavaScript 和原生模块将 Firebase 服务与 React Native 应用程序集成的基本功能。在 React Native 项目的根文件夹中执行以下命令以安装react-native-firebase模块：

      npm install @react-native-firebase/app
# or using yarn
# yarn add @react-native-firebase/app
    

创建 Firebase 项目

创建/添加 Firebase 项目：首次使用时，Firebase 会显示创建项目选项来设置项目。如果当前帐户中已有项目，请选择添加项目选项来创建新项目：
添加名称：项目名称可以是任何内容，但长度至少应为四个字符，并且只能包含数字、字母、空格和-！'"特殊字符。提供名称并单击继续：

项目名称可以重复，但始终使用唯一的名称以避免可能出现的配置问题。

创建项目：截至目前，不需要任何其他 Firebase 服务，因此请禁用 Google Analytics 并选择创建项目按钮：

创建项目可能需要几分钟。项目创建成功后，按“继续”进入项目屏幕。

在 Firebase 项目中添加原生项目

Firebase 支持移动和 Web 应用，因此需要在 Firebase 项目下添加平台特定的应用，并配置原生（Android 和 iOS）项目文件：

设置Android Firebase项目

在 Firebase 项目控制台中选择 Android 应用选项，然后按照步骤创建和配置 Android 项目：

添加包：创建 Android 项目需要包名。它是 Android 应用的唯一标识符。包名用于在 Play Store 和设备上标识应用，因此它必须是唯一的值。包名定义为RNFirebaseStorage/android/app/build.gradle文件中applicationId键的字符串值：

      applicationId "com.rnfirebasestorage"

在Android 包名称字段中添加包名称，并提供昵称来注册 Android 应用程序。

添加配置文件：下载google-services.json文件，然后将该文件复制并粘贴到RNFirebaseStorage/android/app文件夹中。

配置 Google 服务：Firebase 配置需要google-services插件来构建项目，因此在RNFirebaseStorage/android/build.gradle文件中添加google-services依赖项：

      buildscript {
ext {//...}
repositories {//...}
dependencies {
//...
classpath 'com.google.gms:google-services:4.3.3' // add this
}
}
    

在顶部的RNFirebaseStorage/android/app/build.gradle文件中添加google-services插件：

      // apply plugin: "com.android.application"
apply plugin: "com.google.gms.google-services" // add this
    

无需为 Android 添加任何其他 Firebase SDK 依赖项。如果您选择了 Google Analytics，则还应将其添加为 NPM 模块依赖项，而不是gradle依赖项。4.验证应用程序：运行 Android 项目以确认与 Firebase 成功集成：

      npx react-native run-android --verbose

注意：如果出现任何问题，请确保google-services.json正确，尽管接收更新状态可能会有轻微延迟。或者，运行

      cd android && ./gradlew clean && cd ..

清理项目并重新运行项目。

设置iOS Firebase项目

添加 Bundle ID：Bundle ID（如<font style="vertical-al

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

曝光30063浏览1607