时间戳

首页 > 解决方案 > 在 react-navigation v3 中默认情况下，标题后退按钮不起作用

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

问题描述

我最近正在使用 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;

你能弄清楚它背后的问题吗？谢谢 ：）

标签： react-nativereact-navigation

解决方案

经过大量的实验，令人惊讶的是，我发现在返回按钮中的点击功能搞砸了headerStyle:。paddingBottom:

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

我在headerStyle下面有我的喜欢；

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

推荐阅读