我如何将徽章计数从组件更新或传递到Tab.Navigator。 React-native

Question

我想在底部选项卡中更新或显示徽章计数，如何将组件中API的计数传递给Tab.Navigator，并在底部选项卡中显示计数。

示例代码

`import Channels from '@channels';
 import Documents from '@documents';
render(){
return(
<Tab.Navigator
    initialRouteName={this.state.selectedTab}
    tabBarOptions={{
      activeTintColor: '#248E42',
      labelStyle:{fontSize:width/35'}
    }}
  >
    <Tab.Screen
     name="Channels"
     component={Channels}
     options={{
      tabBarLabel: 'Channels',
      tabBarIcon: ({ focused,badgeCount }) => (
        <View>
        <Image source={Images.iconChannel} style={{ height: 24, width: 24 }} />
        {badgeCount < 0 &&
          (
          <View style={styles.badge}>
            <Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>{badgeCount}</Text>
          </View>
          )
        }
        </View>
      )
    }}
    />
    <Tab.Screen
     name="Documents"
     component={Documents}
     options={{
      tabBarLabel: 'Documents',
      tabBarIcon: ({ focused }) => (
        <Image source={Images.iconDocuments} style={{ height: 24, width: 24 }} />
      ),
    }}
    />
  </Tab.Navigator>)}
`

您的环境

 `@react-navigation/native - ^5.1.7
 @react-navigation/bottom-tabs - ^5.2.8
 react-native-screens - ^2.7.0
 react-native - 0.62.2`

Answer 1

我的底部标签中的通知徽章也有这个问题。因此，我使tabbarIcon成为一个单独的组件，并将其与应用状态连接。