如何在React Native（React Navigation v6）中隐藏Android默认返回按钮

针对你遇到的问题，用React Navigation v6可以通过以下两种方式解决：

1. 单屏幕配置 #

在目标屏幕的options中，设置headerBackVisible: false隐藏系统默认返回按钮，同时通过headerLeft传入你的自定义返回按钮组件：

<Stack.Screen
  name="TargetScreen"
  component={TargetScreenComponent}
  options={({ navigation }) => ({
    headerLeft: () => (
      // 替换成你的自定义返回按钮
      <TouchableOpacity 
        onPress={() => navigation.goBack()}
        style={{ marginLeft: 16 }}
      >
        <Text>自定义返回文本</Text>
      </TouchableOpacity>
    ),
    headerBackVisible: false, // 关键：隐藏系统默认返回按钮
  })}
/>

2. 全局配置（所有屏幕统一设置） #

如果需要所有屏幕都隐藏系统默认返回按钮，可在创建Stack Navigator时通过screenOptions全局配置：

const Stack = createNativeStackNavigator();

function AppStack() {
  return (
    <Stack.Navigator
      screenOptions={({ navigation }) => ({
        headerBackVisible: false,
        // 全局自定义返回按钮，个别屏幕可单独覆盖
        headerLeft: () => (
          <TouchableOpacity 
            onPress={() => navigation.goBack()}
            style={{ marginLeft: 16 }}
          >
            <Text>返回</Text>
          </TouchableOpacity>
        ),
      })}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Detail" component={DetailScreen} />
      {/* 特殊屏幕可单独设置options覆盖全局 */}
      <Stack.Screen 
        name="SpecialScreen" 
        component={SpecialScreenComponent}
        options={{ headerBackVisible: true }}
      />
    </Stack.Navigator>
  );
}

说明：headerBackVisible属性会控制系统默认返回按钮的显示状态，设置为false后，Android端的默认返回按钮就会被隐藏，同时不影响你自定义的返回按钮正常显示。

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