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

9 回答

• 3

  For react-navigation version v1 >= 1.0.0-beta.9 ，使后退按钮消失：

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

  如果你也想清理导航堆栈，你可以这样做（假设你在你想要导航的屏幕上）：

  import { NavigationActions } from 'react-navigation';
  

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

  resetNavigation(targetRoute) {
    const resetAction = NavigationActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({ routeName: targetRoute }),
      ],
    });
    this.props.navigation.dispatch(resetAction);
  }
  

  然后在要导航到目标路由时调用 this.resetNavigation('myRouteWithDisabledBackFunctionality')

  For react-navigation version v2 你需要使用 StackAction.reset(...) 而不是 NavigationActions.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

  回复于 2024-06-02T21:38:33+08:00
• 3

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

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

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

  回复于 2024-06-02T21:38:33+08:00
• 0

  您是否考虑过使用 this.props.navigation.replace( "HomeScreen" ) 而不是 this.props.navigation.navigate( "HomeScreen" ) .

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

  更多信息检查Documentation . 当然，您可以通过在 navigationOptions 中设置 headerLeft: null 来隐藏后退按钮

  回复于 2024-06-02T21:38:33+08:00
• 14

  react-navigation versions >= 1.0.0-beta.9

  navigationOptions:  {
  headerLeft: null}
  

  回复于 2024-06-02T21:38:33+08:00
• 95

  发现它自己;）添加：

  left: null,
  

  禁用默认后退按钮 .

  const MainStack = StackNavigator({
    Login: {
      screen: Login,
      navigationOptions: {
        title: "Login",
        header: {
          visible: false,
        },
      },
    },
    FirstPage: {
      screen: FirstPage,
      navigationOptions: {
        title: "FirstPage",
        header: {
          left: null,
        }
      },
    },
  

  回复于 2024-06-02T21:38:33+08:00
• 3

  我们需要将 gesturesEnabled 设置为false，并将 headerLeft 设置为 null . 因为我们也可以通过滑动屏幕来导航回来 .

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

  回复于 2024-06-02T21:38:33+08:00
• 0

  我们可以通过将headerLeft设置为null来修复它

  static navigationOptions =({navigation}) => {
      return {
          title: 'Rechercher une ville',
          headerLeft: null,
      }  
  }
  

  回复于 2024-06-02T21:38:33+08:00
• 4

  在最新版本（v2）中工作 headerLeft:null . 您可以添加控制器的 navigationOptions 如下所示

  static navigationOptions = {
      headerLeft: null,
    };
  

  回复于 2024-06-02T21:38:33+08:00
• 0

  对于最新版本的React Navigation，即使您在某些情况下使用null，它仍然可能会显示“后退”！

  在您的屏幕名称下的 main app.js 中进行此操作，或者只需转到 class file 并添加： -

  static navigationOptions = {
          headerTitle:'Disable back Options',
          headerTitleStyle: {color:'white'},
          headerStyle: {backgroundColor:'black'},
          headerTintColor: 'red',
          headerForceInset: {vertical: 'never'},
          headerLeft: " "
        }
  

  回复于 2024-06-02T21:38:33+08:00