在反应导航中禁用后退按钮

Question

我正在使用反应原生导航(react-navigation)StackNavigator.它在应用程序的整个生命周期中从"登录"页面开始.我不想有后退选项,返回登录屏幕.有谁知道登录屏幕后它是如何隐藏在屏幕上的？顺便说一下,我还使用以下方法将其隐藏在登录屏幕中:

const MainStack = StackNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      title: "Login",
      header: {
        visible: false,
      },
    },
  },
  // ... other screens here
})

Answer 1

对于react-navigation版本v1> = 1.0.0-beta.9,要使后退按钮消失:

navigationOptions:  {
    title: 'MyScreen',
    headerLeft: null
}

如果你也想清理导航堆栈,你可以做这样的事情(假设你在你想要导航的屏幕上):

import { StackActions, NavigationActions } from 'react-navigation';

const resetAction = StackActions.reset({
  index: 0, // <-- currect active route from actions array
  actions: [
    NavigationActions.navigate({ routeName: 'myRouteWithDisabledBackFunctionality' }),
  ],
});

this.props.navigation.dispatch(resetAction);

并使用一个函数导航到目标路由,该路由将禁用所有后台功能:

navigationOptions:  {
    title: 'MyScreen',
    headerLeft: null
}

然后StackActions.reset(...) 在您想要导航到目标路线时调用

对于react-navigation v2版本,您需要使用NavigationActions.reset而不是StackActions.reset(...)

import { StackActions, NavigationActions } from 'react-navigation';

const resetAction = StackActions.reset({
  index: 0, // <-- currect active route from actions array
  actions: [
    NavigationActions.navigate({ routeName: 'myRouteWithDisabledBackFunctionality' }),
  ],
});

this.props.navigation.dispatch(resetAction);

更多信息:https: //reactnavigation.org/docs/en/stack-actions.html

Answer 2

如果你的反应导航 v6.x

options={{
   title: "Detail Pembayaran",
   headerTitleStyle:{
      fontWeight:'bold',
   },
   headerBackVisible:false
}}

参考：React文档

Answer 3

您可以使用隐藏后退按钮left:null,但对于Android设备,当用户按下后退按钮时,它仍然能够返回.您需要重置导航状态并隐藏按钮left:null

以下是重置导航状态的文档:https://reactnavigation.org/docs/navigators/navigation-actions#Reset

此解决方案适用于react-navigator 1.0.0-beta.7,但left:null不再适用于最新版本.

Answer 4

我们需要设置假的gesturesEnabled一起headerLeft到null.因为我们也可以通过滑动屏幕来导航回来.

navigationOptions:  {
   title: 'Title',
   headerLeft: null,
   gesturesEnabled: false,
}

Answer 5

你有没有考虑过使用this.props.navigation.replace( "HomeScreen" )而不是this.props.navigation.navigate( "HomeScreen" ).

这样您就不会向堆栈添加任何内容.因此,如果在Android中按下后退按钮或在IOS中向右滑动屏幕,HomeScreen将不会发送任何信息.

更多信息请查看文档.当然,你可以隐藏通过设置后退按钮headerLeft: null在navigationOptions

Answer 6

对于反应导航 V6.0

<Stack.Screen
          name={'Dashboard'}
          component={Dashboard}
          options={{
            gestureEnabled: false,
            headerShown: true,
            headerLeft: () => <></>,
          }}>
</Stack.Screen>

Answer 7

使用React Native的BackHandler为我工作。只需在您的ComponentWillMount中添加以下行：

BackHandler.addEventListener('hardwareBackPress', function() {return true})

它将在Android设备上禁用后退按钮。

Answer 8

我正在使用 v6，它对我有用：

 <Stack.Screen
    name="ApparelsHome"
    component={ApparelsHome}
    options={{
      headerLeft: () => <></>,
    }}
/>