Tab StackNavigator中的状态?

问题描述 投票:0回答:1

似乎TabNavigator没有它自己的状态。有没有办法使用stateprops

我想在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,
    },
reactjs react-native react-navigation
1个回答
1
投票

您可以通过screenprops传递其他自定义道具

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

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

完整的文档是here

© www.soinside.com 2019 - 2024. All rights reserved.