如何将状态值从组件传递到TabNavigator

Question

我想通过propStackNavigator将道具从组件传递到createBottomTabNavigator

const TabsNavigator = createBottomTabNavigator({
    'Notification': {
        screen: Private,
        navigationOptions: () => ({
            tabBarIcon:
            <Text style={{ color: '#FFFFFF' }}>
                3
            </Text>
        })
    }
})
const BaseNavigatorContainer = createAppContainer(
    createStackNavigator({
        'TABS': { screen: TabsNavigator }
    })
);

class BaseNavigator extends Component {
    render() {
        return (
            <BaseNavigatorContainer screenProps={{ BadgeCount: this.state.BadgeCount }} />
        )
    }
}

export { BaseNavigator };

我想将this.state.BadgeCount传递给3

Answer 1

您只需将连接的组件作为图标传递，即可获得badgeCount ：

const TabsNavigator = createBottomTabNavigator({
    'Notification': {
        screen: Private,
        navigationOptions: () => ({
            tabBarIcon: ({ tintColor }) => (
                <TabBarIconWithBadge color={tintColor} />
            ),
        }),
    }
})

您的图标组件将如下所示：

const TabBarIconWithBadge = props => (
    <Icon color={props.color} />
    <Text style={...}>{props.badgeCount}</Text> 
);

const mapStateToProps = state => {
    return {
        badgeCount: state.notifications.badgeCount
    };
};

export default connect(mapStateToProps)(TabBarIconWithBadge);