React Navigation 无限栈/动态栈

Question

我想通过 React 导航实现无限堆栈，这意味着我需要一个动态堆栈导航器，我可以在其中推送无限数量的屏幕（最多 20 个屏幕就足够了）。你可以想象这就像在亚马逊应用程序中一样，你可以在产品详细信息中单击相关产品，它会显示另一个产品详细信息屏幕，你可以在其中执行相同的操作。

你们中有人知道如何做到这一点吗？

Answer 1

这可以通过 react-navigation

来完成

您可以使用 this.props.navigation.push('ScreenName')

而不是 this.props.navigation.navigate('ScreenName')

您可能希望向屏幕传递某种描述，以便它知道要渲染什么，您可以通过传递参数来做到这一点

this.props.navigation.push('ScreenName', { key: productId })

您只需要设置几个模板屏幕，然后可以用您传递给它们的参数填充这些模板屏幕。

你可以在这里看到更多关于react-navigation的不同功能 https://reactnavigation.org/docs/en/navigation-prop.html#navigator-dependent-functions

这是一个显示它有效的零食https://snack.expo.io/@andypandy/infinite-navigation

在 snack 中，我传递了一个位置和日期，您可以看到这些随着每个屏幕被推入堆栈而更新。按 Go Back 返回堆栈中的一个位置。