默认情况下，react-navigation v3 中的标题后退按钮不起作用

Question

我最近在使用 react-navigation v3，以便使用createStackNavigator堆栈导航功能。因此，正如预期的那样，它应该在工作状态下返回标题上的默认后退按钮。

但不幸的是，后退按钮呈现完美，但无法正常工作。

下面是我的代码，我已经routes.js为各种导航路线分离了一个文件，并根据其使用情况在屏幕中导入。

import ...
import ...
import ...

class Router extends Component{
  async componentDidMount() {
    await Font.loadAsync({
      //...
    });
  }

  render(){
    return (
      <Navigator />
    )
  }
}

const StackNavigator = createStackNavigator({
    Home: {
        screen: Landing
    },
    Login: {
        screen: Login
    },
    ResetPassword: {
      screen: ResetPassword
    },
    SetPassword: {
      screen: SetPassword
    },
    Signup: {
      screen: Signup
    },
    Dashboard: {
      screen: Dashboard
    },
    MealsRecipe: {
      screen: MealsRecipe
    }
},{
    initialRouteName: 'Home',
    headerLayoutPreset: 'center'
})
const Navigator = createAppContainer(StackNavigator);

export default Router;

你能找出它背后的问题吗？谢谢 ：）

Answer 1

经过大量实验后，令人惊讶的是，我发现在headerStyle:放弃paddingBottom:后退按钮中的点击功能时会变得一团糟。

但没想到，这是为什么呢？如果有人对此有任何意见，请发表评论。

我headerStyle喜欢下面的内容；

headerStyle: {
  height: 0,
  marginTop: 0,
  paddingTop: 10,
  paddingBottom: 30,
  backgroundColor: '#cb7429'
},