react-native - 默认情况下，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'
},