如何在 React-navigation/react-native 中隐藏后退按钮答案

【问题标题】：how to hide back button in React-navigation/react-native如何在 React-navigation/react-native 中隐藏后退按钮
【发布时间】：2019-07-03 22:45:26
【问题描述】：

我想隐藏左上角的后退按钮，但我不知道如何使用 react-navigation 或 react-native 来实现。

刚刚尝试使用static navigationOptions = { header: null }，但< Back 按钮仍然存在。

我使用的是Modal，它可以工作，但我想知道如何在不使用Modal 的情况下隐藏< Back 按钮。

提前谢谢你！

【问题讨论】：

标签： javascript react-native frontend react-navigation

【解决方案1】：

在 iOS 中使用 headerLeft: () => <></> 效果很好，但在 Android 中仍然显示默认的后退按钮。

我可以通过在 Stack Navigator 的 screenOptions 上添加 headerBackVisible: false 来隐藏它，或者您可以将它包含在每个 Stack Screen 的 options 中。

【讨论】：

headerBackVisible: false 终于为我解决了这个问题。非常感谢。
这适用于本机堆栈。

【解决方案2】：

我想您正在使用 StackNavigator 并且您不想要标题。

您需要在 StackNavigatorConfig 中使用headerMode: none。例如：

const ModalStack = createStackNavigator(
  {
    HomeScreen: { screen: Home },
    ModalScreen: { screen: Modal },
  },
  {
    headerMode: 'none',
    mode: 'modal',
  }
);

更多信息请关注react-navigation docs。

【讨论】：

【解决方案3】：

这取决于你使用的 react 导航版本，试试这个

const ModalStack = createStackNavigator(
{
  HomeScreen: { screen: Home },
  ModalScreen: { screen: Modal },
},
{
  headerMode: 'none',
  header: null
}
);

【讨论】：

【解决方案4】：

如果是 StackNavigator 默认配置，进入 StackNavigator：

默认导航选项：{ 标头：空， },

【讨论】：

【解决方案5】：


    const Stack = createStackNavigator(); 
    <Stack.Navigator screenOptions={{headerShown: false}}>

createStackNavigator 是一个函数，它返回一个包含 2 个属性的对象：Screen 和 Navigator。它们都是用于配置导航器的 React 组件。现在在 Stack.Navigator 下方，您可以使用 <Stack.Screen name="Home" component={HomeScreen} /> 放置屏幕。在名称中，您可以给出任何名称，在组件中给出您的组件的名称。

【讨论】：