导航回从一个堆栈到另一个堆栈的反应导航答案

【问题标题】：Navigation back within react navigation from one stack to another stack导航回从一个堆栈到另一个堆栈的反应导航
【发布时间】：2019-10-08 08:01:46
【问题描述】：

有两种方法可以进入播放器屏幕。

您单击“更多”选项卡，其中包含“团队”链接，该链接显示所有可用的团队。然后您单击一个团队，它会将您带到 TeamStack。

在 TeamStack 中，默认是 Team Home，然后是一堆其他屏幕，其中一个是 Roster，其中列出了球队的所有球员。从那里您可以到达 PlayerStack，它会将您带到播放器主屏幕。

现在，当您进入球员屏幕时，您可以轻扫以返回，这会将您从原来的位置带回到...到名单，然后是球队主页，然后是更多页面。

到目前为止一切顺利！

您单击链接到 StatsStack 的“Stats”选项卡。默认的 StatsStack 屏幕列出了领先排行榜的玩家。从那里你可以点击一个播放器。从那里您可以单击玩家的团队，这会将您带到 TeamStack。然后，您可以再次单击“名册”。如果你从那里回去，一切都会正常工作。回到球队主页，回到球员，回到统计数据。到目前为止，还不错！

问题来了……

让我们返回“统计信息”选项卡，然后点击一名球员，然后进入球队，然后进入名单。现在，如果你点击一个新球员，然后返回，它会直接返回到统计屏幕，而不是返回名册，然后是球队主页，然后是原来的球员，然后是统计。

不知何故，由于 PlayerStack 已经打开，当您从 Route 2 选项的 Team Roster 中转到某个玩家时，它会将您带回到最初打开的 PlayerStack，而不是向堆栈添加新屏幕。

这有意义吗？我该如何做，以便当您按照 Route 2 到达新玩家时，当您返回时，它会将您带回正确的屏幕顺序？

const MainStackNavigator = createStackNavigator(
  {
    MainTabNavigator: MainTabNavigator,

    Team: {
      screen: TeamStack,
      navigationOptions: ({ navigation }) => {
        return {
          header: null,
        }
      }
    },

    Player: {
      screen: PlayerStack,
      navigationOptions: ({ navigation }) => {
        return {
          header: null,
        }
      }
    },
)

const MainTabNavigator = createBottomTabNavigator(
    ...

    Stats: {
        screen: StatsStack,
        navigationOptions: {
          tabBarIcon: ({ focused }) => {
            return <Icon
              name="ios-stats"
              iconStyle={{}}
              color={focused ? '#000' : '#ccc'}
              size={28} />;
          },
        },
      },

    More: {
        screen: MoreStack,
        navigationOptions: {
          tabBarIcon: ({ focused }) => {
            return <Icon
              name="ios-more"
              iconStyle={{}}
              color={focused ? '#000' : '#ccc'}
              size={28} />;
          },
        },
      },
)

【问题讨论】：

标签： react-navigation react-navigation-stack

【解决方案1】：

我可以删除这个问题，因为我只是在写完所有内容后才想出来，但答案是在名册页面中，我必须使用Navigation.navigate('Player') 进入播放器屏幕而不是使用Navigation.push('Player')。

According to the docs，如果屏幕已经打开，它不会将另一个重复的屏幕添加到堆栈中，它只会回到打开的屏幕。为了强制屏幕进入堆栈，您必须使用 push 方法。

这将适用于上述两种情况。

【讨论】：