时间戳

首页 > 解决方案 > Expo - 顶部不需要的白条，带有后退按钮

react-native - Expo - 顶部不需要的白条，带有后退按钮

问题描述

我正在尝试使用 expo 和 react-native 构建一个应用程序。

我在顶部有一个带有后退按钮的白条。我不明白它为什么在那里，这是我需要禁用的 expo、react-native 或 react-navigation 的功能吗？

我尝试搜索任何“*Bar*”组件，但实际上什么都没有，我的 App.js 只呈现我自己的栏，其下方有一个组件视图。

截图： https ://ibb.co/QQ5fMDP

AppNavigator.js：

export default createAppContainer(
  createStackNavigator({
    [ROUTES.Login]: LoginScreen,
    [ROUTES.Some]: SomeScreen,
  }),
  {
    initialRouteName: ROUTES.Login,
    defaultNavigationOptions: {
      headerMode: 'none',
      headerVisible: false,
      header: null,
    },
    navigationOptions: {
      headerMode: 'none',
      headerVisible: false,
      header: null,
    },
  },
);

标签： react-nativereact-navigationexpo

解决方案

这可能是 react-navigation 自动添加到堆栈导航器的标题。如果不想使用，可以全局删除

createStackNavigator({
  ...,
},{
  defaultNavigationOptions: {
    headerMode: 'none'
  }
});

或逐屏显示：

MyComponent.navigationOptions = {
  headerMode: 'none'
};

在react-navigation API 文档中查看更多信息。

编辑

看起来您设置导航的方式有误。您需要将其更改为：

export default createAppContainer(
  createStackNavigator({
    [ROUTES.Login]: LoginScreen,
    [ROUTES.Some]: SomeScreen,
  },
  {
    initialRouteName: ROUTES.Login,
    defaultNavigationOptions: {
      headerMode: 'none',
      headerVisible: false,
      header: null,
    },
    navigationOptions: {
      headerMode: 'none',
      headerVisible: false,
      header: null,
    },
  })
);

请注意，createStackNavigator现在有两个参数，根据需要。

推荐阅读