【问题标题】: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 中。

    更多信息https://reactnavigation.org/docs/native-stack-navigator/#headerbackvisible

    【讨论】:

    • 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 下方,您可以使用 &lt;Stack.Screen name="Home" component={HomeScreen} /&gt; 放置屏幕。在名称中,您可以给出任何名称,在组件中给出您的组件的名称。

          【讨论】: