react-native - 更改选项卡后如何弹出堆栈顶部？

Question

我有一个带有 4 个标签的标签栏。他们每个人都有一个堆栈导航器。切换标签后，我想弹出到顶部吗？我知道它与 defaultNavigationOptions 有关。请给我一些建议。

标签： react-nativereact-navigationreact-navigation-stack

Answer 1

const HomeStack = createStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="Details" component={DetailsScreen} />
    </HomeStack.Navigator>
  );
}

const SettingsStack = createStackNavigator();

function SettingsStackScreen() {
  return (
    <SettingsStack.Navigator>
      <SettingsStack.Screen name="Settings" component={SettingsScreen} />
      <SettingsStack.Screen name="Details" component={DetailsScreen} />
    </SettingsStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeStackScreen} />
        <Tab.Screen
          name="Settings" 
          component={SettingsStackScreen} 
          listeners={({ navigation, route }) => ({
            tabPress: e => {
              // navigation.popToTop();
              navigation.navigate(route.name);
            },
          })}
      />
      </Tab.Navigator>
    </NavigationContainer>
  );
}