反应原生导航到具有不同道具的同一页面答案

【问题标题】：React native navigate to same page with different props反应原生导航到具有不同道具的同一页面
【发布时间】：2019-06-23 17:00:41
【问题描述】：

我正在开发一个使用侧抽屉的 RN 应用程序。（RN 版本：0.59.8）

const DrawerNavigator = createDrawerNavigator(
    {
        Home: {
            screen: HomeScreen
        },
        Poems: {
            screen: PoemsScreen
        },
        Contest: {
            screen: ContestScreen
        },
        AboutMe: {
            screen: AboutMeScreen
        }
    },
    DrawerConfig
);

export default createAppContainer(DrawerNavigator);

使用的 react-navigation 版本是 3.11.0。在菜单中，多个子项指向同一个页面，一个 ViewPager，但具有不同的参数（页面索引）。问题是以下都不起作用：

尝试使用推送而不是导航（返回 _this2.props.navigation.push is not a function）
正在尝试重置相应的堆栈。

const resetAction = StackActions.reset({
   index: 0,
   key: 'Poems',
   actions: [NavigationActions.navigate({ routeName: 'Poems' })]
})
this.props.navigation.dispatch(resetAction)

（也试过key: null）

非常感谢任何帮助！

【问题讨论】：

this.props.navigation.navigate('诗歌', { key: 1})
@GokulKulkarni 感谢您的洞察力，但它不起作用:(
我无法正确理解您的问题，请帮助理解。您想导航到具有不同参数的同一页面吗？

标签： react-native react-native-android react-navigation react-navigation-drawer

【解决方案1】：

尝试阅读https://reactnavigation.org/docs/en/navigating.html#navigate-to-a-route-multiple-times

您需要使用 navigation.push() 来运行具有不同参数的组件副本。

【讨论】：

这对我不起作用，因为我正在使用 SwitchNavigator。只有在使用 StackNavigator 时才能使用 props.navigation.push() 方法。否则，这将导致错误提示 props.navigation.push 未定义或不是函数。检查这个：reactnavigation.org/docs/en/navigation-prop.html

【解决方案2】：

添加数据以导航功能

this.props.navigation.navigate('routeName', { data })

例如：this.props.navigation.navigate('BookDetails', { book: this.props.book })

【讨论】：