双击 BottomTabNavigator 的奇怪行为 - React Navigation

Question

我在我的移动应用程序中使用 React Navigation 进行导航，我的导航结构如下：

const AccountStack = createStackNavigator(
    {
        Account: AccountView,
        ...

    },
    {
        initialRouteName: 'Account',
        headerMode: 'screen',
        ....
    }
)

const SearchUsersStack = createStackNavigator(
    {
        SearchUsers: SearchUsersView,
        UserProfile: UserProfileView,
        FriendsOfUser: FriendsOfUserView
    },
    {
        ...
    }
)

const AccountModalStack = createStackNavigator(
    {
        AccountStack: AccountStack,
        SearchUsersStack: SearchUsersStack,
    },
    {
        initialRouteName: 'AccountStack',
        headerMode: 'none',
        mode: 'modal',

    }
)

const MainApp = createBottomTabNavigator(
    {
        MainHome: HomeStack,
        MainPlay: PlayStack,
        MainAccount: AccountModalStack
    },
    {
        ...
    }
)

如果我在 "search User" 堆栈中（例如，在 SearchUserView 中）并单击底部选项卡导航器中的 "Account" 图标，堆栈将正确关闭，我将 return 到我的 "account" 视图。

但是，如果我在我的 AccountStack 的其中一条路线中并单击底部选项卡导航器中的 "Account" 图标，则堆栈不会消失。所以如果我在帐户堆栈中很远，我必须用后退箭头返回。

为什么它在我在 SearchUserStack 中时有效，但在我的 AccountStack 中时无效？

希望得到帮助！

谢谢！

维克多

Answer 1

您可以覆盖点击标签时发生的情况，您可以通过标签栏中每个导航器的 navigationOptions 来实现。

const AccountModalStack = createStackNavigator(
  {
    AccountStack: AccountStack,
    SearchUsersStack: SearchUsersStack,
    // ...
  },
  {
    initialRouteName: 'AccountStack',
    navigationOptions: {
      tabBarOnPress: ({ navigation }) => {
        navigation.navigate({
          routeName: 'AccountStack', // navigates to the initial route
          action: navigation.popToTop(), // go to the top of the stack of that route
        })
      },
      // ...
    },
    // ...
  }
)

默认情况下，选项卡可能会尝试简单地导航到初始路线，而不重置堆栈。