tabstacknavigator中的状态



似乎Tabnavigator似乎没有自己的状态。有什么方法可以使用stateprops

我想在通知tabicon上显示the number of unread notification

export default TabNavigator(
  {
    ...
    Noti: {
      screen: NotificationStackNavigator,
    },
    ...
  },
  {
    navigationOptions: ({ navigation }) => ({
      header: null,
      tabBarIcon: ({ focused }) => {
        const { routeName } = navigation.state;
        let iconName;
        switch (routeName) {
          ...
          case 'Noti':
            iconName = 'ios-notifications';
            break;
          ...
        }
        ...
        if(iconName == 'ios-notifications') {
          return (
            <IconBadge
              MainElement={
                <Ionicons
                  name={iconName}
                  size={30}
                  style={{ marginBottom: -3 }}
                  color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}/>
              }
              BadgeElement={
                <Text style={{color:'#FFFFFF'}}>
                    {{this.state.notifications}} // my goal
                </Text>
              }
              IconBadgeStyle={{
                backgroundColor: '#f64e59',
                position: 'absolute',
                right:-10,
                top:0,
                }}
            />
          );
        }
        ...

请让我知道是否有任何尚不清楚。预先感谢

Update 我打算重构我的TabNavigator。这是您想说的吗?

export default TabNavigator( 
to 
const MainTabNavigator = TabNavigator(
class MainTabNavigator extends Component {
    state = {notification}
export default connect(...)(MainTabNavigator);

更新2 MainterabNavigator的顶级组件是另一个TabNavigator。还有其他解决方案吗?

const RootTabNavigator = TabNavigator ({
    Auth: {
      screen: AuthStackNavigator,
    },
    Welcome: {
      screen: WelcomeScreen,
    },
    Main: {
      screen: MainTabNavigator,
    },

您可以通过screenprops

传递其他自定义道具
const TabNav = TabNavigator({
  // config
});
<TabNav
  screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>

完整的文档在这里

相关内容

  • 没有找到相关文章

最新更新