具有双击功能的怪异行为BottomTabNavigator-反应导航

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
    },
    {
        ...
    }
)

[如果我位于“搜索用户”堆栈中（例如，在SearchUserView中），然后单击底部标签导航器中的“帐户”图标，则该堆栈将正确关闭，并且我将返回到“帐户”视图。

但是，如果我处于AccountStack的其中一条路由中，并且单击底部选项卡导航器中的“ Account”图标，则堆栈不会关闭。因此，如果我在帐户堆栈中距离很远，则必须使用后退箭头返回。

为什么当我在SearchUserStack中而不在我的AccountStack中时起作用？

我希望找到帮助！

谢谢！

Viktor

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(), // clears the stack
        })
      },
      // ...
    },
    // ...
  }
)