React Native应用程序中添加Firebase Analytics
大家好，我们终于推出了一个完整的系列，用于将 Firebase 特性/功能集成到适用于 Android 和 iOS 的 React Native 应用程序中。 我相信你们都听说过 火力基地，如果没有那么您应该了解它，因为它是创建成功应用程序的完整套件。 它可以帮助您加速和扩展应用程序开发，而无需管理基础设施，因此使用 Firebase，您可以专注于应用程序开发而不是管理基础设施。 在本系列中，我们将探讨 Firebase Analytics、数据库、身份验证、应用内消息传递、推送通知、AdMob 等。 因此，让我们开始第一个示例，在 React Native 应用程序中添加 Firebase 分析。
在这个完整的系列中，我们将使用 反应原生 Firebase 这是一个非常简单的集成库并提供了很多功能。 反应原生 Firebase 是官方推荐的软件包集合，为 Android 和 iOS 应用程序上的所有 Firebase 服务带来 React Native 支持。
推荐：在React Native应用程序中使用Firebase进行电子邮件身份验证
Firebase 分析
Google Analytics for Firebase 收集您的应用的使用情况和行为数据。 Firebase Analytics 提供最多 500 个不同事件的免费、无限制报告。 它的两个主要问题是：
- 活动：您的应用中发生了什么，例如用户操作、系统事件或错误
- 用户属性：您定义的用于描述用户群细分的属性，例如语言偏好或地理位置
SDK 自动捕获某些关键事件和用户属性。 将 Firebase 分析与您的应用集成后，它就会开始记录一些 事件 （ad_click、app_clear_data、app_remove、app_update 等）和 用户属性 （年龄、应用程序版本、国家/地区、设备详细信息等），无需编写任何代码。 您还可以定义自己的自定义事件来衡量对您的业务特别重要的事情。 Analytics 提供了许多不同的预定义事件来跟踪用户行为。
自定义、预定义和保留事件
市场上有很多工具可以为您的应用程序提供分析，但 Google Analytics 的优点在于其智能事件捕获功能。 有这么多 预约活动 分析会自动捕获，并为您提供捕获任何您想要的自定义事件的工具。
您可以捕捉任何 自定义事件 非常容易使用 日志事件 您只需在其中传递事件名称和要在该事件上捕获的有效负载即可。 请尽量避免使用 预留活动，如果您使用任何类似于保留事件名称的事件名称，它将引发错误。
analytics().logEvent('my_custom_event', {
id: 101,
item: 'My Product Name',
description: ('My Product Desc 1', 'My Product Desc 2'),
});如果我们谈论 预定义事件 那么Firebase提供了很多 预定义事件方法 这将帮助您从不同类型的应用程序（例如电子商务、旅行和游戏应用程序）捕获事件。 您可以轻松使用任何预定义事件，例如
analytics().logAddPaymentInfo({
coupon: 'OfferZero',
currency: 'INR',
items: ('T-Shirt'),
payment_type: 'Credit Card',
value: 1000,
});屏幕追踪
在分析领域，屏幕跟踪发挥着重要作用，因为它显示了应用程序用户对不同功能的兴趣。 例如，如果您的应用程序中有 10 个不同的功能，并且每个功能都在不同的屏幕上提供，那么根据屏幕跟踪，您可以轻松找到哪个功能最受欢迎以及哪个功能需要更新。
我们都知道 React Native 应用程序在单个 活动/视图控制器，这意味着本机 Firebase SDK 不会跟踪任何屏幕更改。 在 React Native 应用程序中实现导航的方法有很多种，因此没有“万能”的屏幕跟踪解决方案。 但是我们有一些预定义的事件可以帮助我们做到这一点，例如 日志屏幕视图。
借助 logScreenView 事件，您可以轻松捕获屏幕的移动
await analytics().logScreenView({
screen_name: currentRouteName,
screen_class: currentRouteName,
});您可以在使用时看到相同的用法 反应导航 和 反应本机导航。
我认为这就足够了，现在我们可以转向代码并了解如何在 React Native 应用程序中集成 Firebase/Google 分析。
制作 React Native 应用程序
React Native 入门将帮助您更多地了解如何制作 React Native 项目。 我们将使用 React Native 命令行界面来制作我们的 React Native 应用程序。
如果您之前安装了全局的react-native-cli软件包，请将其删除，因为它可能会导致意外问题：
npm uninstall -g react-native-cli @react-native-community/cli运行以下命令创建一个新的 React Native 项目
npx react-native init ProjectName如果你想使用特定的 React Native 版本启动一个新项目，你可以使用 –version 参数：
npx react-native init ProjectName --version X.XX.X注意如果上述命令失败，您可能使用的是旧版本 react-native 或者 react-native-cli 在您的电脑上全局安装。 尝试卸载 cli 并使用 npx 运行 cli。
这将在项目目录中创建一个带有名为 App.js 的索引文件的项目结构。
Firebase SDK 集成
要从任何 React Native Firebase 示例开始，您需要将 Firebase 集成到您的应用程序中，我专门为此详细制作了一篇单独的文章，您将在其中看到在 Android 版 React Native 应用程序中添加 Firebase 的点对点过程，以及iOS 两者都有。
请访问如何在 Android 和 iOS 应用程序中集成 Firebase，然后返回执行下一步。
完成 Firebase 集成后，您可以安装更多依赖项。
安装依赖项
要安装依赖项，请打开终端并使用以下命令跳转到您的项目
cd ProjectName对于 React Native Firebase，我们需要安装和设置应用程序模块
npm install @react-native-firebase/app --save现在安装分析模块
npm install @react-native-firebase/analytics --save此命令会将所有依赖项复制到您的 node_module 目录中。 –save 是可选的，它只是更新 package.json 文件中的依赖项。
CocoaPods 安装
React Native 0.60 更新后，他们引入了自动链接，因此我们不需要链接库，但对于 iOS，我们需要安装 pod。 因此要安装 pod，请使用
cd ios/ && pod install --repo-update && cd ..集成 Firebase Analytics 的代码
请在任何代码编辑器中打开 App.js 并将代码替换为以下代码
应用程序.js
// React Native Firebase
// #1 Add Firebase Analytics in React Native App
//https://aboutreact.com/react-native-firebase-analytics
// Import React in our code
import React from 'react';
// Import all the components we are going to use
import {
SafeAreaView,
TouchableOpacity,
StyleSheet,
View,
Text,
} from 'react-native';
// Import Firebase Analytics
import analytics from '@react-native-firebase/analytics';
const App = () => {
const realtimeLogContent = () => {
analytics().logSelectContent({
content_type: 'Button Clicked',
item_id: 'button1',
});
};
const logCustomeEvent = () => {
analytics().logEvent('my_custom_event', {
id: 101,
item: 'My Product Name',
description: ('My Product Desc 1', 'My Product Desc 2'),
});
};
return (
<SafeAreaView style={styles.container}>
<View style={styles.container}>
<Text style={styles.heading}>
React Native Firebase
</Text>
<Text style={styles.normalTextStyle}>
#1 Firebase Analytics
</Text>
<View style={styles.innerContainer}>
<Text style={styles.normalTextStyle}>
Log React Time Content
</Text>
<TouchableOpacity
activeOpacity={0.7}
style={styles.buttonStyle}
onPress={realtimeLogContent}>
<Text style={styles.buttonTextStyle}>
Click Button
</Text>
</TouchableOpacity>
<Text style={styles.normalTextStyle}>
Trigger My Custom Event
</Text>
<TouchableOpacity
activeOpacity={0.7}
style={styles.buttonStyle}
onPress={logCustomeEvent}>
<Text style={styles.buttonTextStyle}>
Create Custom Event
</Text>
</TouchableOpacity>
</View>
</View>
<Text
style={{
fontSize: 16,
textAlign: 'center',
color: 'grey',
}}>
www.aboutreact.com
</Text>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
padding: 10,
alignItems: 'center',
},
innerContainer: {
flex: 1,
alignItems: 'center',
},
heading: {
fontSize: 30,
},
buttonStyle: {
minWidth: 300,
justifyContent: 'center',
padding: 10,
backgroundColor: '#8ad24e',
},
buttonTextStyle: {
color: 'white',
textAlign: 'center',
},
normalTextStyle: {
color: 'black',
textAlign: 'center',
marginVertical: 20,
fontSize: 18,
},
});
export default App;运行 React Native 应用程序
再次打开终端并使用跳转到您的项目。
cd ProjectName1. 启动 Metro Bundler
首先，您需要启动 Metro，React Native 附带的 JavaScript 捆绑器。 要启动 Metro 捆绑程序，请运行以下命令
npx react-native start一旦您启动 Metro Bundler，它将永远在您的终端上运行，直到您将其关闭。 让 Metro Bundler 在自己的终端中运行。 打开一个新终端并运行该应用程序。
2.启动React Native应用程序
在 Android 虚拟设备或真实调试设备上运行项目
npx react-native run-android或在 iOS 模拟器上运行（仅限 macOS）
npx react-native run-ios输出截图
这就是您如何将 Firebase Analytics 集成到适用于 Android 和 iOS 的 React Native 应用程序中。 如果你想禁用Firebase的自动初始化，你可以看到 。 如果您有任何疑问或想分享有关该主题的内容，您可以在下面发表评论或在此处联系我们。
ZH_CN 
ZH_TW