React Navigation中如何让TabBarBadge始终显示并访问屏幕状态？

方案一：利用导航参数（适合状态仅当前组件管理） #

核心思路是将组件内的products状态同步到导航参数中，再在导航器的options函数中读取该参数来设置徽章，这样不管屏幕是否聚焦，参数更新时徽章都会实时变化。

步骤1：修改屏幕组件，同步状态到导航参数 #

export const ProductsScreenLogic = ({ navigation }) => {
  // 假设products是组件内的状态（如果是从外部获取，逻辑同理）
  const [products, setProducts] = React.useState([{ id: '1' }]);

  // 当products变化时，更新导航参数
  React.useEffect(() => {
    navigation.setParams({ badgeCount: products.length });
  }, [navigation, products]);

  React.useLayoutEffect(() => {
    navigation.setOptions({
      title: 'Products requested',
      headerStyle: {
        backgroundColor: '#f4f4f4',
      },
      headerTitleStyle: {
        color: '#000000',
        fontSize: 24,
      },
      headerTitleAlign: 'left',
    });
  }, [navigation]);

  return <ProductsScreenLayout products={products} />;
};

步骤2：在导航器配置中读取参数设置徽章 #

<MyNavigator.Screen
  name="Products"
  component={ProductsScreenLogic}
  options={({ route }) => ({
    // 读取导航参数中的badgeCount，默认值设为0避免undefined
    tabBarBadge: route.params?.badgeCount || 0
  })}
/>

方案二：全局状态管理（适合多组件共享状态） #

如果products状态需要在多个组件中使用，推荐将状态提升到全局Context（或Redux等状态管理工具），直接在导航器中读取全局状态设置徽章。

步骤1：创建Products全局Context #

const ProductsContext = React.createContext();

export const ProductsProvider = ({ children }) => {
  const [products, setProducts] = React.useState([{ id: '1' }]);

  return (
    <ProductsContext.Provider value={{ products, setProducts }}>
      {children}
    </ProductsContext.Provider>
  );
};

步骤2：在导航器中读取Context状态设置徽章 #

import { ProductsContext } from './ProductsContext';

const MyNavigator = () => {
  const { products } = React.useContext(ProductsContext);

  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Products"
        component={ProductsScreenLogic}
        options={{
          tabBarBadge: products.length,
          // 也可以把header相关配置移到这里，避免在组件内重复设置
          title: 'Products requested',
          headerStyle: { backgroundColor: '#f4f4f4' },
          headerTitleStyle: { color: '#000000', fontSize: 24 },
          headerTitleAlign: 'left'
        }}
      />
      {/* 其他屏幕 */}
    </Tab.Navigator>
  );
};

步骤3：在屏幕组件中读取Context状态 #

export const ProductsScreenLogic = () => {
  const { products } = React.useContext(ProductsContext);

  return <ProductsScreenLayout products={products} />;
};

注意事项 #

• 原代码中useLayoutEffect的依赖项tours.length是错误的，应该改为products.length（方案一中已修正）。
• 方案一中的useEffect必须监听products的变化，确保状态更新时同步到导航参数。

内容的提问来源于stack exchange，提问作者Cristian Flórez