React Native底部标签导航返回页面顺序异常问题

你的问题是因为Bottom Tab导航默认会维护自己的内部导航历史，点击返回时优先走Tab内部的栈逻辑，所以才会从HomeScreen跳去SearchScreen。以下是适配你使用的导航版本的解决方案：

最简单的方案：设置Tab导航的返回行为 #

直接在BottomTab的导航配置里加backBehavior: 'none'，让Tab导航把返回事件交给外层的Stack导航处理：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function BottomTabNavigator() {
  return (
    <Tab.Navigator 
      initialRouteName="HomeScreen"
      backBehavior="none" // 关键配置：禁用Tab内部返回逻辑
    >
      <Tab.Screen name="SearchScreen" component={SearchScreen} />
      <Tab.Screen name="HomeScreen" component={HomeScreen} />
      <Tab.Screen name="CartScreen" component={CartScreen} />
    </Tab.Navigator>
  );
}

这个配置是@react-navigation/bottom-tabs v6.x原生支持的，刚好匹配你用的^6.3.2版本，设置后在HomeScreen点击返回就会直接回到外层Stack的上一页。

自定义返回按钮（适合需要定制返回样式的场景） #

如果需要自定义返回按钮的样式，可以在HomeScreen的页面配置里手动覆盖返回按钮的点击逻辑：

import { useNavigation } from '@react-navigation/native';
import { HeaderBackButton } from '@react-navigation/stack';

function HomeScreen() {
  const navigation = useNavigation();

  return (
    // 你的页面内容
    <View>
      {/* ... */}
    </View>
  );
}

// 在BottomTab的Screen配置中设置headerLeft
function BottomTabNavigator() {
  return (
    <Tab.Navigator initialRouteName="HomeScreen">
      <Tab.Screen name="SearchScreen" component={SearchScreen} />
      <Tab.Screen 
        name="HomeScreen" 
        component={HomeScreen}
        options={{
          headerLeft: () => (
            <HeaderBackButton
              onPress={() => {
                // 获取外层Stack导航实例并触发返回
                navigation.dangerouslyGetParent()?.goBack();
              }}
            />
          )
        }}
      />
      <Tab.Screen name="CartScreen" component={CartScreen} />
    </Tab.Navigator>
  );
}

重置Tab导航栈（适合复杂场景） #

如果需要确保Tab导航栈里始终只有HomeScreen，可以在Tab导航初始化时重置栈：

function BottomTabNavigator({ navigation }) {
  React.useEffect(() => {
    navigation.reset({
      index: 0,
      routes: [{ name: 'HomeScreen' }],
    });
  }, [navigation]);

  return (
    <Tab.Navigator initialRouteName="HomeScreen">
      <Tab.Screen name="SearchScreen" component={SearchScreen} />
      <Tab.Screen name="HomeScreen" component={HomeScreen} />
      <Tab.Screen name="CartScreen" component={CartScreen} />
    </Tab.Navigator>
  );
}

内容的提问来源于stack exchange，提问作者ChaTho