React Native中用全局变量控制Bottom Tab Navigator未读提示的方案咨询

以下三种方案适配不同项目场景，可按需选择： #

方案1：轻量无额外依赖方案（利用React Navigation路由参数） #

适合未读标记少、不想新增额外依赖的场景，直接用React Navigation自带能力实现：

实现步骤： #

• 调整TabStack的screenOptions逻辑，从对应路由的params中读取未读状态，替换原有全局变量：

// MessagesStack图标逻辑调整
if (route.name === 'MessagesStack') {
  return (
    <View style={{alignItems: 'center'}}>
      <Icon name='messages_white' size={30} opacity={iconOpacity}/>
      {/* 从当前路由params取未读数 */}
      {((route.params?.unread_messages ?? 0) > 0) && <View style={{backgroundColor: Main.colours.yellow_medium, width: 6, height: 6, borderRadius: 3}} />}
    </View>
  );
}
// 其他栈的未读标记同理，改成从route.params读取对应字段

• 子栈内更新未读状态：在MessagesStack的任意页面中，通过getParent获取Tab导航实例，更新对应Screen的参数即可：

import { useNavigation } from '@react-navigation/native';

// 页面内调用
const navigation = useNavigation();
// 接口返回未读消息数后更新
navigation.getParent()?.setParams({ unread_messages: res.unread_count });

方案2：React Context方案（适合未读状态多的场景） #

如果有多个未读标记、多个页面需要读写未读状态，用React Context做全局状态共享更易维护：

实现步骤： #

1. 新建未读状态上下文文件UnreadContext.js：

import { createContext, useContext, useState } from 'react';

const UnreadContext = createContext();

// 状态提供者，包在App根组件外层
export const UnreadProvider = ({ children }) => {
  const [unreadState, setUnreadState] = useState({
    unread_messages: 0,
    unread_notifications: 0,
    pending_friend_requests: 0,
    pending_event_applications: 0,
    pending_group_applications: 0
  });

  // 统一更新方法
  const updateUnread = (key, value) => {
    setUnreadState(prev => ({ ...prev, [key]: value }));
  };

  return (
    <UnreadContext.Provider value={{ unreadState, updateUnread }}>
      {children}
    </UnreadContext.Provider>
  );
};

// 自定义Hook，方便组件消费状态
export const useUnread = () => useContext(UnreadContext);

2. 在App根组件外层包裹提供者：

import { UnreadProvider } from './UnreadContext';

export default function App() {
  return (
    <UnreadProvider>
      {/* 原有导航容器、TabStack等代码 */}
    </UnreadProvider>
  );
}

3. 改造TabStack读取Context状态：

TabStack = () => {
  StatusBar.setBarStyle("dark-content");
  const insets = useSafeAreaInsets();
  // 新增：读取未读状态
  const { unreadState } = useUnread();

  // 后续图标逻辑里的未读变量都从unreadState取，例如：
  // 消息栈未读：unreadState.unread_messages
  // 通知栈未读：unreadState.unread_notifications
  // 个人页待处理：unreadState.pending_friend_requests等

4. 子栈内更新状态：

import { useUnread } from './UnreadContext';

// 页面内调用
const { updateUnread } = useUnread();
// 接口返回未读数后更新
updateUnread('unread_messages', res.unread_count);

方案3：全局状态管理方案（适配已用状态库的中大型项目） #

如果项目已经接入了Redux、Zustand、Jotai等全局状态管理库，直接把未读状态存入全局store即可，用法和Context逻辑一致，不需要额外新建Context。 #

内容的提问来源于stack exchange，提问作者Simon Degn