在 DrawerNavigator 中使用屏幕选项传递props

IT技术 javascript reactjs react-navigation
2021-04-11 05:31:00

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

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

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

我该怎么做：

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

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

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

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

screen: (props) => <MyNotificationsScreen {...props.navigation.state.params} propName={val1} />
@sushilbharwani 这只是一个例子 - 与问题中的相同。您可以定义所需的任何属性。
2021-05-30 05:31:00
这里的 val1 是什么它告诉我找不到变量 val1
2021-06-20 05:31:00

你在这里有两个选择：

1- 您在“导航调用”中传递参数：

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

2- 另一种方法是创建 Notifications1

class Notifications1 
{
  render ( )
  {
    return <MyNotificationsScreen propName="val1" />
  }
}
你的回答与问题无关
2021-06-12 05:31:00
其它你可能感兴趣的问题
上一篇在响应中的 url 更改上重新渲染相同的组件 下一篇componentDidMount() 没有被调用，但仅在特定情况下被调用