javascript - 反应原生如何在我的应用程序运行时显示徽章

问题描述

我已经面临一个问题 1 周。我的问题是我想在运行我的应用程序时显示新的消息徽章而不单击消息室我可以在单击消息室后显示徽章。

ChatList 组件src/Components/ChatList

  const [badgeCount, setBadgeCount] = useState(0);
  const {badgeStateDispatch} = useContext(GlobalContext);
  const unReadMessageQuery = db
    .collection('chats')
    .doc(id)
    .collection('messages')
    .where('user', '==', recipientEmail)
    .where('unread', '==', true);
  const [unReadMessageToBadge] = useCollection(unReadMessageQuery);
  useEffect(() => {
    const badgeMessagesCount = unReadMessageToBadge?.size;
    console.log(badgeMessagesCount);
    setBadgeCount(badgeMessagesCount);
    badgeStateDispatch({type: BADGE_SHOW});
  }, [unReadMessageToBadge]);

减速器

import {BADGE_SHOW, BADGE_RESET} from '../../Constants/actionTypes';

const badgeCount = (state, {type, payload}) => {
  switch (type) {
    case BADGE_SHOW:
      return {...state, badge: (state.badge = true)};
    case BADGE_RESET:
      return {...state, badge: (state.badge = null)};
    default:
      return state;
  }
};

export default badgeCount;

TabNavi src/Navigator/Tabnavi.js

import React, {useContext} from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import HomeStackNavi from './HomeStackNavi';
import ProfileStackNavi from './ProfileStackNavi';
import MessageStackNavi from './MessageStackNavi';
import Entypo from 'react-native-vector-icons/Entypo';
import Icon from 'react-native-vector-icons/FontAwesome';
import colors from '../Assets/theme/colors';
import {GlobalContext} from '../Context/GlobalProvider';
const Tab = createBottomTabNavigator();
const TabNavi = () => {
  const {
    badgeState: {badge},
  } = useContext(GlobalContext);
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: colors.white,
        inactiveTintColor: colors.gray,
        style: {backgroundColor: colors.primary},
      }}>
      <Tab.Screen
        name="Home"
        component={HomeStackNavi}
        options={{
          tabBarIcon: () => <Icon name="home" size={25} color={colors.white} />,
        }}
      />
      <Tab.Screen
        name="Messages"
        component={MessageStackNavi}
        options={{
          tabBarIcon: () => (
            <Entypo name="message" size={25} color={colors.white} />
          ),
          tabBarBadge: badge,
          tabBarBadgeStyle: {
            top: Platform.OS === 'ios' ? 0 : 9,
            minWidth: 10,
            maxHeight: 10,
            borderRadius: 7,
            fontSize: 10,
          },
        }}
      />
      <Tab.Screen
        name="Profile"
        component={ProfileStackNavi}
        options={{
          tabBarIcon: () => <Icon name="user" size={25} color={colors.white} />,
        }}
      />
    </Tab.Navigator>
  );
};

export default TabNavi;

编辑：这是 ChatList 的父组件。


const ChatRoomList = () => {
  const [user] = useAuthState(auth);
  if (!user || !user.email) return;
  const {badgeStateDispatch} = useContext(GlobalContext);
  const renderItem = useCallback(({item}) => <ChatList item={item} />, []);
  const keyExtractor = useCallback(item => item.id, []);
  const userChatRef = db
    .collection('chats')
    .where('users', 'array-contains', user.email);
  const [chatsSnapshot] = useCollection(userChatRef);
  const [chatList, setChatList] = useState([]);
  useEffect(() => {
    const chatData = new Array();
    chatsSnapshot?.docs.map(chat => {
      chatData.push({id: chat.id, users: chat.data().users});
    });
    setChatList(chatData);
  }, [chatsSnapshot]);
  useFocusEffect(
    React.useCallback(() => {
      badgeStateDispatch({type: BADGE_RESET});
    }, []),
  );
  return (
    <View>
      <FlatList
        data={chatList}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
        initialNumToRender={7}
        showsVerticalScrollIndicator={false}
      />
    </View>
  );
};

export default ChatRoomList;

我真的很感谢你的帮助。

标签： javascriptreactjsreact-native

javascript - 反应原生如何在我的应用程序运行时显示徽章

问题描述

解决方案

推荐阅读