Reactjs 当用户添加内容时，如何在react导航中再次呈现标题

这里 让我给你看看照片

我想做的是我想在购物车旁边添加一个号码作为徽章。 但问题是，即使我更改了另一个组件的值，导航组件也不会重新渲染

下面是标题导航器的代码

const createMyStackNavigator = (name, screen, whatStack) => ({navigation}) => {
  whatStack = createStackNavigator();
  return (
    <whatStack.Navigator
      screenOptions={{
        headerStyle: {backgroundColor: `${headerColor}`},
        headerTintColor: '#fff',
      }}>
      <whatStack.Screen
        name={name}
        component={screen}
        options={{
          title: name,
          headerLeft: () => (
            <Icon2.Button
              name="navicon"
              size={25}
              backgroundColor={headerColor}
              onPress={() => {
                navigation.openDrawer();
              }}></Icon2.Button>
          ),
          headerRight: () => (
            <Icon2.Button
              name="shopping-bag"
              size={25}
              backgroundColor={headerColor}
              onPress={() => {
                navigation.openDrawer();
              }}>
              <Text style={{color: 'white'}}>{productInCart}</Text>
            </Icon2.Button>
          ),
        }}
      />
    </whatStack.Navigator>
  );
};

const DrawerNavigator = ({navigation}) => {
    const isFocused = useIsFocused();

  const cartList = useSelector((state) => state.productReducer.cartList);
    productInCart = cartList.OrderDTO?.OrderLines.length

  return (
    <Drawer.Navigator drawerContent={(props) => <DrawerContent {...props} />}>
      <Drawer.Screen
        name="ProductScreen"
        component={ProductScreenStackScreen}
      />
    </Drawer.Navigator>
  );
};

constcreatemystacknavigator=（名称、屏幕、whatStack）=>（{navigation}）=>{
whatStack=createStackNavigator（）；
返回(
(
{
navigation.openDrawer（）；
}}>
),
头灯：（）=>(
{
navigation.openDrawer（）；
}}>
{productInvot}
),
}}
/>
);
};

下面是如何创建导航器

const createMyStackNavigator = (name, screen, whatStack) => ({navigation}) => {
  whatStack = createStackNavigator();
  return (
    <whatStack.Navigator
      screenOptions={{
        headerStyle: {backgroundColor: `${headerColor}`},
        headerTintColor: '#fff',
      }}>
      <whatStack.Screen
        name={name}
        component={screen}
        options={{
          title: name,
          headerLeft: () => (
            <Icon2.Button
              name="navicon"
              size={25}
              backgroundColor={headerColor}
              onPress={() => {
                navigation.openDrawer();
              }}></Icon2.Button>
          ),
          headerRight: () => (
            <Icon2.Button
              name="shopping-bag"
              size={25}
              backgroundColor={headerColor}
              onPress={() => {
                navigation.openDrawer();
              }}>
              <Text style={{color: 'white'}}>{productInCart}</Text>
            </Icon2.Button>
          ),
        }}
      />
    </whatStack.Navigator>
  );
};

const DrawerNavigator = ({navigation}) => {
    const isFocused = useIsFocused();

  const cartList = useSelector((state) => state.productReducer.cartList);
    productInCart = cartList.OrderDTO?.OrderLines.length

  return (
    <Drawer.Navigator drawerContent={(props) => <DrawerContent {...props} />}>
      <Drawer.Screen
        name="ProductScreen"
        component={ProductScreenStackScreen}
      />
    </Drawer.Navigator>
  );
};

const-DrawerNavigator=（{navigation}）=>{
const isFocused=useiscocused（）；
const cartList=useSelector（（state）=>state.productReducer.cartList）；
ProductInPoint=cartList.OrderDTO？.OrderLines.length
返回(
}>
);
};

正如您所看到的，

{productInvot}

应该在其他组件中更新其值时更新

但事实并非如此。你们能提出一些建议吗？所以每当用户点击某个按钮时

---

标题将再次出现

您是否反对使用redux来管理您的状态？显然，您需要注意组件范围，以及如何相应地管理本地状态。