Блог

Я сталкивался с проблемой в течение 1 недели. Мой вопрос в том, что я хотел бы показать новый значок сообщения, не нажимая «Комната сообщений», когда я запускаю свое приложение, я могу показать значок после нажатия «Комната сообщений».

когда я запускаю свое приложение. Домашняя страница.

а потом я нажал «Комната сообщений», теперь я вижу значок

Компонент списка чата src/Компоненты/Список чата

   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;

 

ТабНави 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;

 

Изменить: Это родительский компонент списка чата.

 
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;
 

Я был бы очень признателен вам за помощь.

Ваша проблема в том, что ваш звонок для проверки непрочитанных сообщений находится в вашем компоненте списка чата, который находится на вашей второй вкладке. react-навигация отображает этот компонент только при переходе на вторую вкладку, поэтому этот код запускается только при выборе этой вкладки.

Вы должны переместить этот вызов в другое место, либо в компонент более высокого порядка, либо вообще из дерева реакций, хотя это потребует небольшой доработки, поскольку вы полагаетесь на крючки.