在DrawerNavigator中通过屏幕选项传递道具 [英] Passing props with screen option in DrawerNavigator

问题描述

我在 https://reactnavigation.org/docs/navigators/drawer 中使用DrawerNavigator

I am using DrawerNavigator in https://reactnavigation.org/docs/navigators/drawer.

const MyApp = DrawerNavigator({
    Home: {
        screen: MyHomeScreen,
    },
    Notifications: {
        screen: MyNotificationsScreen,
    },
});

我有多个使用 MyNotificationsScreen 组件和不同道具的屏幕.

I have multiple screens that are using MyNotificationsScreen component with different props.

我该如何做:

const MyApp = DrawerNavigator({
    Home: {
        screen: MyHomeScreen,
    },
    Notifications1: {
        screen: MyNotificationsScreen(propName=val1),
    },
    Notifications2: {
        screen: MyNotificationsScreen(propName=val2),
    },
});

推荐答案

在很多情况下，我认为是更好的方式:

Better way in many cases I think:

screen: (props) => <MyNotificationsScreen {...props} propName={val1} />

这会将您的导航道具放置在props.navigation.state.params中.如果您希望它们出现在this.props中(这意味着您的组件未与react-navigation紧密耦合)，请使用:

This will put your nav props in props.navigation.state.params. If you want them to appear in this.props instead (which will mean your component is not tightly coupled to react-navigation) then use:

screen: (props) => <MyNotificationsScreen {...props.navigation.state.params} propName={val1} />

这篇关于在DrawerNavigator中通过屏幕选项传递道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！