国家在TabStackNavigator？

• Z时代
• 2024-01-10
• 分类：问答

似乎TabNavigator没有它自己的状态。有什么方法可以使用state或props？国家在TabStackNavigator？

我想在Notification 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, 
       }} 
      /> 
     ); 
     } 
     ... 

请让我知道，如果有什么不清楚。在此先感谢

更新我打算重构我的TabNavigator。这是你想说的吗？

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

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

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

回答：

const TabNav = TabNavigator({ 
    // config 
}); 
<TabNav 
    screenProps={/* this prop will get passed to the screen components as this.props.screenProps */} 
/> 

以上是 国家在TabStackNavigator？ 的全部内容， 来源链接： utcz.com/qa/263154.html