國家在TabStackNavigator？

Question

似乎TabNavigator沒有它自己的狀態。有什麼方法可以使用state或props？

我想在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, 
    }, 

Answer 1

您可以通過screenprops

const TabNav = TabNavigator({ 
    // config 
}); 

<TabNav 
    screenProps={/* this prop will get passed to the screen components as this.props.screenProps */} 
/> 

完整的文檔是here