React Navigation - 在选项卡之间跳转答案

【问题标题】：React Navigation - Jumping between tabsReact Navigation - 在选项卡之间跳转
【发布时间】：2020-05-28 04:32:36
【问题描述】：

大家好，我的标签栏中有 5 个容器，如果我选择另一个标签容器，我想知道是否有返回主屏幕的选项。

所以我有以下

https://snack.expo.io/@react-navigation/stacks-in-tabs-v3

当我在Home 选项卡中时，我单击Go to Details，然后切换到Settings 选项卡。如果我返回Home 容器，我想查看默认屏幕HomeScreen

有什么选择吗？

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

您可以像这样重新定义每个navigationOptions 的tabBarOnPress 的StackNavigator：

const stacks = [
  { Home: HomeScreen, Details: DetailsScreen },
  { Settings: SettingsScreen, Details: DetailsScreen }
].reduce((stacksObj, stack) => {
  const initialRoute = Object.keys(stack)[0];
  stacksObj[initialRoute] = createStackNavigator(
    stack,
    {
      navigationOptions: {
        tabBarOnPress: ({ navigation }) => navigation.navigate({
          routeName: initialRoute,
          action: navigation.popToTop()
        })
      }
    }
  );
  return stacksObj 
}, {});

export default createAppContainer(createBottomTabNavigator(
  stacks,
  { /* same defaultNavigationOptions as the snack example */ }
));

【讨论】：

【解决方案2】：

由于您的DetailScreen 嵌套在堆栈Home 中，因此您必须再上一层导航到该屏幕

  _navigateHome = () => {
    const navigateAction = NavigationActions.navigate({
      routeName: 'Home',
      action: NavigationActions.navigate({ routeName: 'Home' }),
    });
    this.props.navigation.dispatch(navigateAction);
  }

【讨论】：

那我该去哪里打电话_navigateHome？
当你在SettingsScreen中按下主页按钮时
好吧，我的想法不是从那里开始，而是从标签开始。因此，在Home 选项卡中我在Details 屏幕中时，我从选项卡栏跳到Settings 选项卡，然后从那里我从选项卡栏中选择Home 选项卡

【解决方案3】：

看起来api已经改变了，实现这一点的新方法是：

import { CommonActions } from '@react-navigation/native';

navigation.dispatch(
  CommonActions.navigate({
    name: 'Profile',
    params: {
      user: 'jane',
    },
  })
);

【讨论】：