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

Question

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

您单击 'More' 选项卡，其中 'Teams' 的 link 显示所有可用的团队。然后单击一个团队，它会将您带到 TeamStack。

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

现在，当您到达播放器屏幕时，您可以滑动以返回，这将使您从原来的位置返回...到花名册，然后是团队主页，然后到更多页面。

目前一切顺利！

您单击 'Stats' 选项卡，该选项卡 link 进入 StatsStack。默认的 StatsStack 屏幕列出了领先排行榜的玩家。从那里你可以点击一个播放器。从那里您可以单击玩家的团队，这会将您带到 TeamStack。然后您可以再次单击 'roster'。如果您从那里返回，一切正常。回到球队主场，回到球员，回到统计数据。到目前为止，还不错！

问题来了...

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

不知何故，因为 PlayerStack 已经打开，当您从路线 2 选项中的团队花名册中转到一名玩家时，它会将您带回到最初打开的 PlayerStack，而不是向堆栈添加新屏幕。

这有意义吗？我该怎么做才能让当你沿着路线 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} />;
          },
        },
      },
)

Answer 1

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

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

这适用于我上面的两种情况。

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

Navigation back within react navigation from one stack to another stack

react-navigation

react-navigation-stack