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'
},

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

1 个答案: