[reactjs] 반응 탐색에서 뒤로 버튼 비활성화

Program / 글쓴이

반응 네이티브 탐색 (반응 탐색) StackNavigator를 사용하고 있습니다. 앱의 전체 수명주기 동안 로그인 페이지에서 시작됩니다. 뒤로 옵션을 원하지 않고 로그인 화면으로 돌아갑니다. 로그인 화면 후 화면에서 숨길 수있는 방법을 아는 사람이 있습니까? BTW, 나는 또한 다음을 사용하여 로그인 화면에서 숨기고 있습니다.

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

답변

1) react-navigation v2 이상에서 뒤로 버튼을 사라지게하려면 :

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

2) 탐색 스택을 정리하려면 :

탐색하려는 화면에 있다고 가정합니다.

react-navigation 버전 v5 이상 을 사용하는 경우 navigation.reset또는 CommonActions.reset다음을 사용할 수 있습니다 .

 // Replace current navigation state with a new one,
 // index value will be the current active route:

navigation.reset({
  index: 0,
  routes: [{ name: 'Profile' }],
});

출처 및 추가 정보 : https://reactnavigation.org/docs/navigation-prop/#reset

또는:

navigation.dispatch(
  CommonActions.reset({
    index: 1,
    routes: [
      { name: 'Home' },
      {
        name: 'Profile',
        params: { user: 'jane' },
      },
    ],
  })
);

출처 및 추가 정보 : https://reactnavigation.org/docs/navigation-actions/#reset

이전 버전의 react-navigation :

v2-v4 사용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);

v1 사용NavigationActions.reset

3) Android의 경우 BackHandler를 사용하여 하드웨어 뒤로 버튼도 비활성화해야합니다 .

http://reactnative.dev/docs/backhandler.html

또는 후크를 사용하려는 경우 :

https://github.com/react-native-community/hooks#usebackhandler

그렇지 않으면 탐색 스택이 비어있는 경우 Android 하드웨어 뒤로 버튼을 누를 때 앱이 닫힙니다.

답변

당신이 사용하는 생각이 this.props.navigation.replace( "HomeScreen" )대신 this.props.navigation.navigate( "HomeScreen" ).

이렇게하면 스택에 아무것도 추가하지 않습니다. 그래서 HomeScreen은 안드로이드에서 뒤로 버튼을 누르거나 IOS에서 화면을 오른쪽으로 스 와이프해도 돌아갈 아무것도 흔들지 않습니다.

자세한 내용은 문서를 확인하십시오 . 물론 설정하여 뒤로 버튼을 숨길 수 있습니다 headerLeft: null.navigationOptions

답변

을 사용하여 뒤로 버튼을 숨길 수 left:null있지만 Android 기기의 경우 사용자가 뒤로 버튼을 누르면 뒤로 돌아갈 수 있습니다. 탐색 상태를 재설정하고 버튼을 숨겨야합니다.left:null

다음은 탐색 상태를 재설정하는 문서입니다. https://reactnavigation.org/docs/navigators/navigation-actions#Reset

이 솔루션은에서 작동 react-navigator 1.0.0-beta.7하지만 left:null더 이상 최신 버전에서는 작동하지 않습니다.

답변

gesturesEnabled와 함께 headerLeft에 false를 설정해야 합니다 null. 화면을 스 와이프하여 뒤로 이동할 수 있기 때문입니다.

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

답변

React Native에서 BackHandler를 사용하면 저에게 효과적이었습니다. ComponentWillMount에 다음 행을 포함하십시오.

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

그것은 안드로이드 장치에서 뒤로 버튼을 비활성화합니다.

답변

직접 찾았습니다.) 추가 :

  left: null,

기본 뒤로 버튼을 비활성화합니다.

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

답변

반응 탐색 버전> = 1.0.0-beta.9

navigationOptions:  {
   headerLeft: null
}