将Firebase应用内消息传递集成到React Native中提高用户参与度

React Native Firebase 应用内消息传递

这是我们的第四篇文章 反应原生 Firebase 系列，在这个例子中我们将看到什么是 Firebase 应用内消息传递？以及如何在 React Native 应用程序中集成应用程序内消息传递？如何让您的应用程序用户参与有趣的活动。

让我们从 Firebase 应用内消息传递示例开始。

Firebase 应用内消息传递

Firebase 应用内消息传递可以向您的应用活跃用户发送有针对性的上下文消息，鼓励他们使用关键应用功能，从而帮助您吸引他们。

例如，您可以发送应用内消息来吸引用户订阅、观看视频、完成关卡或购买商品。您可以将消息自定义为卡片、横幅、模式或图像，并设置触发器，以便它们在最有利于您的用户的时候准确显示。

React Native Firebase 为原生 Android 和 iOS 提供支持。笔记：显示消息与 Firebase 通知不同。

启用或禁用显示消息

在某些情况下，我们可能不希望某些用户收到应用程序内消息。比方说，您只想向注册用户或未付费/免费订阅者显示消息，然后您可以使用以下命令禁用订阅 setMessagesDisplaySuppressed 方法。

const allowToReceiveMessage = (isAllowed) => {
  setCanReceiveMessage(isAllowed);
};

抑制状态在重新启动之间不会持续存在，因此请确保尽早调用它。

示例说明

在此示例中，我们将创建一个简单的应用程序，其中有一个按钮用于启用或禁用显示消息。通过单击按钮，他/她可以抑制显示消息。安装 React Native 应用程序后，我们将从 Firebase 控制台创建一个活动，该活动将在下次应用程序启动时显示显示消息。因此，让我们开始使用代码，然后您将看到创建营销活动的步骤。

制作 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/in-app-messaging --save

此命令会将所有依赖项复制到您的 node_module 目录中。 –save 是可选的，它只是更新 package.json 文件中的依赖项。

CocoaPods 安装

React Native 0.60 更新后，他们引入了自动链接，因此我们不需要链接库，但对于 iOS，我们需要安装 pod。因此要安装 pod，请使用

cd ios/ && pod install --repo-update && cd ..

在 React Native 中集成应用内消息传递的代码

请在任何代码编辑器中打开 App.js 并将代码替换为以下代码

应用程序.js

// #4 Integrate Firebase In-App Messaging in React Native for User Engagement
// https://aboutreact.com/react-native-firebase-in-app-messaging/

// Import React in our code
import React, { useState } from "react";

// Import all the components we are going to use
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
} from "react-native";

import inAppMessaging from "@react-native-firebase/in-app-messaging";

const App = () => {
  const (
    canReceiveMessage,
    setCanReceiveMessage,
  ) = useState(true);

  const allowToReceiveMessage = async (isAllowed) => {
    setCanReceiveMessage(isAllowed);
    // Allow/Disallow user to receive messages
    await inAppMessaging().setMessagesDisplaySuppressed(
      isAllowed
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.titleText}>
        Integrate Firebase In-App Messaging{' '}
        in React Native for User Engagement
      </Text>
      <View style={styles.innerContainer}>
        <Text style={styles.simpleText}>
          User Can Receive Message :{" "}
          {canReceiveMessage ? "Yes" : "No"}
        </Text>
        <TouchableOpacity
          activeOpacity={0.5}
          style={styles.buttonStyle}
          onPress={() =>
            allowToReceiveMessage(!canReceiveMessage)
          }
        >
          <Text style={styles.buttonTextStyle}>
            {canReceiveMessage
              ? "Disable Receiving Message"
              : "Enable Receiving Message"}
          </Text>
        </TouchableOpacity>
      </View>
      <Text style={styles.footerHeading}>
        React Native Firebase In-App Messaging
      </Text>
      <Text style={styles.footerText}>
        www.aboutreact.com
      </Text>
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  innerContainer: {
    flex: 1,
    alignItems: "center",
    padding: 35,
    justifyContent: "center",
  },
  titleText: {
    fontSize: 20,
    fontWeight: "bold",
    textAlign: "center",
    padding: 20,
  },
  simpleText: {
    fontSize: 16,
    textAlign: "center",
    marginVertical: 16,
  },
  buttonTextStyle: {
    color: "white",
    fontWeight: "bold",
  },
  buttonStyle: {
    alignItems: "center",
    backgroundColor: "orange",
    padding: 10,
    width: "100%",
    marginTop: 16,
  },
  footerHeading: {
    fontSize: 18,
    textAlign: "center",
    color: "grey",
  },
  footerText: {
    fontSize: 16,
    textAlign: "center",
    color: "grey",
  },
});