1

我想在底部选项卡中更新或显示徽章计数，如何将计数从组件中的 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`
4

2 回答 2

0

我连接了整个 TabNavigator 并传递了所需的属性。

于 2021-11-27T19:29:32.173 回答
0

我在底部标签中的通知徽章也遇到了这个问题。因此，我将 tabbarIcon 制作为一个单独的组件，并将其与应用程序状态连接起来。

class BottomTabIcon extends Component {
  render() {
    const { color, notifications: { data: notifications } } = this.props;
    const badgeCount = _.filter(notifications, notification => !notification.is_read).length;
    return (
      <View style={{ width: 24, height: 24, margin: 5 }}>
        <Image source={images.bottom_notification} style={{ tintColor: color }} />
        <View
          style={{
            position: 'absolute',
            right: -6,
            top: -3,
            backgroundColor: 'red',
            padding: 3,
            borderRadius: 6,
            // width: 12,
            // height: 12,
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>
            {badgeCount}
          </Text>
        </View>
    </View>
    );
  }
}

const mapStateToProps = state => ({
  notifications: state.notifications
})

export default connect(mapStateToProps)(BottomTabIcon);

然后导入组件以用作 tabbarIcon。

<Tab.Navigator
    initialRouteName={this.state.selectedTab}
    tabBarOptions={{
      activeTintColor: '#248E42',
      labelStyle:{fontSize:width/35'}
    }}
  >
    <Tab.Screen
     name="Channels"
     component={Channels}
     options={{
      tabBarLabel: 'Channels',
      tabBarIcon: (props) => <BottomTabIcon {...props} />
      )
    }}
    />
</Tab.Navigator>

这个解决方案对我有用，我希望这也能解决你的问题

于 2020-05-15T06:32:06.657 回答