为什么后退按钮覆盖在堆栈导航器中不起作用答案

【问题标题】：Why isn't back button override working in stack navigator为什么后退按钮覆盖在堆栈导航器中不起作用
【发布时间】：2020-07-14 13:21:27
【问题描述】：

根据官方文档，这是如何在 react-navigation 5 中覆盖后退按钮

    import { HeaderBackButton } from '@react-navigation/stack';
    <Screen
    name="Home"
    component={HomeScreen}
    options={{
      headerLeft: (props) => (
      <HeaderBackButton
         {...props}
         onPress={() => {
           // Do something
         }}
       />
     ),
   }}
  />;

但是，当我尝试实现它时它不起作用。

 <Stack.Screen name="Document" component={Document} options={
          { headerLeft: (props) => (<HeaderBackButton {...props} onPress={() => console.log('works')}/>)},
          { ...TransitionPresets.SlideFromRightIOS }
        }/>

另一件事是，如果我将它放在 TransitionPreset 下方，则转换不起作用。我在这里做什么？

【问题讨论】：

标签： react-native react-navigation stack-navigator

【解决方案1】：

试试这个：

<Stack.Screen
  name="Document"
  component={Document}
  options={{
    headerLeft: (props) => (
      <HeaderBackButton
        {...props}
        onPress={() => {
          // Do something
        }}
      />
    ),
    ...TransitionPresets.ModalSlideFromBottomIOS,
  }}
/>

您的第一个示例是正确的，但您在第二段代码中存在一些语法错误（您使用的括号类型和放置位置）。

【讨论】：