考虑一下，您分别有 3 个屏幕 A、B、C。因此，StackNavigator 中后退按钮的默认功能是：- 如果您按下屏幕 C 上的后退按钮，它将带您到上一个屏幕，即屏幕 B。要覆盖它，您可以在屏幕 C 上执行以下操作： ——

import { HeaderBackButton } from 'react-navigation';
static navigationOptions = ({navigation}) => {
  return{
    headerLeft:(<HeaderBackButton onPress={()=>{navigation.navigate('A')}}/>)
 }
}

您可以使用navigationOptions该屏幕覆盖特定屏幕的后退按钮。您可以在文档中阅读有关覆盖后退按钮的更多信息react-navigation

来自文档的示例

class HomeScreen extends React.Component {
  static navigationOptions = {
    headerTitle: <LogoTitle />,
    headerRight: (
      <Button
        onPress={() => alert('This is a button!')}
        title="Info"
        color="#fff"
      />
    ),
  };
}

覆盖后退按钮

后退按钮会自动在被渲染StackNavigator 时，它可以为用户从他们的当前屏幕回去-换句话说，只要有在堆栈超过一分屏后退按钮将被渲染。

一般来说，这就是你想要的。但在某些情况下，您可能希望通过上述选项自定义后退按钮，而在这种情况下，您可以指定 a headerLeft，就像我们headerRight对后退按钮所做的一样，并完全覆盖后退按钮。

您也可以在创建堆栈导航器时执行此操作。从 react-navigation v4 开始更新。

import { createStackNavigator, HeaderBackButton } from "react-navigation-stack";

const yourStackNavigator = createStackNavigator({
  SomeRoute: SomeScreen,
  SpecificRoute: {
    screen: SpecificScreen,
    navigationOptions: ({ navigation }) => ({
        headerLeft: (<HeaderBackButton onPress={_ => navigation.navigate("Somewhere")}/>)
    })
  },
});

如果您使用的是版本 5，并且正在处理功能组件，则可以使用布局效果挂钩来完成此操作（来自文档参考的示例）：

function ProfileScreen({ navigation, route }) {
  const [value, onChangeText] = React.useState(route.params.title);

  React.useLayoutEffect(() => {
    navigation.setOptions({
      title: value === '' ? 'No title' : value,
    });
  }, [navigation, value]);

请注意，如果您要更改headerLeft，则可能需要将函数传递给它（GH 问题参考）。