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

在许多情况下，我认为更好的方式：

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

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

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

Answer 2

这里有两个选项：

1-您在“导航呼叫”中传递参数：

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

2-另一种方法是创建Notifications1

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

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

2 个答案: