在 DrawerNavigator 中使用屏幕选项传递道具

Question

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

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

我有多个屏幕使用具有不同属性的 MyNotificationsScreen 组件。

我该如何做：

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

Answer 1

您在这里有两个选择：

1- 您在 'navigate call':

中传递参数

this.props.navigation.navigate('Notifications1', {propName: 'val1'})

2- 另一种方法是创建 Notifications1

class Notifications1 
{
  render ( )
  {
    return <MyNotificationsScreen propName="val1" />
  }
}

Answer 2

我认为在很多情况下更好的方法：

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

这会将您的导航道具放入 props.navigation.state.params。如果你想让它们出现在 this.props 中（这意味着你的组件没有与 react-navigation 紧密耦合）那么使用：

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

在 DrawerNavigator 中使用屏幕选项传递道具

Passing props with screen option in DrawerNavigator

javascript

reactjs

react-navigation