根据firebase / firestore文档在应用程序图标徽章通知中反应本机答案

【问题标题】：React native in app icon badge notifications according to firebase / firestore documents根据firebase / firestore文档在应用程序图标徽章通知中反应本机
【发布时间】：2021-03-04 06:27:30
【问题描述】：

我正在使用

反应原生
用于推送通知的 OneSignal
反应导航
React Native Elements（徽章组件）
React 原生矢量图标
Firebase，Firestore 作为后端

所以，在我的应用程序中，我的 topRight Stack Screen 中有两个按钮

<Stack.Screen
    name="CreateEvent"
    component={CreateEvent}
    options={{
        headerRight: () => (
             <View style={{ flexDirection: "row", alignItems: "center", marginRight: 10 }}>
                   <TouchableOpacity
                        onPress={() => { navigation.navigate("InvitationsNav") }}>
                            <Badge
                                status="error"
                                containerStyle={{ position: 'absolute', top: -4, right: -4 }}
                                value="10"/> // <--- hardcoded value

                                <IconMaterialIcons
                                    name="event"
                                    color={Constants.colors.primaryColor}
                                    backgroundColor="transparent"
                                    size={30}
                                    style={{ paddingHorizontal: 10 }}/>
                   </TouchableOpacity>

                   <TouchableOpacity
                        onPress={() => { navigation.navigate("nl_Notifications") }}>
                            <Badge
                                status="error"
                                containerStyle={{ position: 'absolute', top: -4, right: -4 }}
                                value="2"/> // <--- hardcoded value
                            <IconIonicons
                                name="notifications-outline"
                                color={Constants.colors.primaryColor}
                                backgroundColor="rgba(52, 52, 52, 0.0)"
                                size={30}
                                style={{ paddingHorizontal: 10 }}/>
                  </TouchableOpacity>
               </View>)

在最后一张图片上，这些值是硬编码的。

我想根据未见过的 Firestore 文档动态设置这两个值。我的意思是，如果用户没有看到最后的通知或事件，请在相应的徽章上设置未看到的文档数量。

如果该特定用户有 3 条新通知，我想以编程方式在徽章上设置 3。

或者，如果该用户有 6 个未见过的事件，我想在徽章上设置该值。

知道如何解决这个问题吗？

我想一个解决方案是在 firestore 文档上添加一个标志，例如：

seen: false

当用户按下通知或事件时，将该标志更改为 true，但使用此解决方案，我必须使用 seen == false 预加载 firestore 文档，我不确定这是一个经济的解决方案。

有没有办法仅通过 OneSignal 推送通知设置这两个值？或者其他解决方案？

提前致谢！！

【问题讨论】：

标签： javascript ios firebase react-native google-cloud-firestore

【解决方案1】：

你在这里提到的：

但使用此解决方案，我必须使用 seen == false 预加载 firestore 文档，我不确定这是一个经济的解决方案。

此说法不正确，firestore 中的文档之间不需要具有相同的结构，因此您可以将该逻辑仅应用于新文档（或者您可以将其添加到旧文档中仅用于数据一致性，因为文档将永远不要“看不见”，在这种情况下，我认为这不是必需的）。

我不熟悉将 OneSignal 用于推送通知，所以我不能说是否有更好的解决方案使用它，但就 Firestore 解决方案而言，因为您仍然需要以某种方式与 Firestore 交互要检查文件是否仍然看不见，标志选项是一个非常好的解决方案。

【讨论】：

@WytrzymałyWiktor 帮助很大