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

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

---

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

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

---

반응 탐색 버전 v2 이상

뒤로 버튼을 사라지게하려면 :

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

탐색 스택도 정리하려면 다음과 같이 할 수 있습니다 (탐색하려는 화면에 있다고 가정).

사용하다 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

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

https://stackoverflow.com/a/40146089/1979861

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

참고 : 이전 react-navigation v1 NavigationActions.reset에서 StackActions.reset 대신 사용되었습니다.

---

를 사용하여 뒤로 버튼을 숨길 수 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,
}

---

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

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

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

---

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
}

---

SwitchNavigator는 이 작업을 수행 할 수있는 방법이 될 것입니다. 작업이 호출 SwitchNavigator되면 기본 경로를 재설정하고 인증 화면을 마운트 해제합니다 navigate.

import { createSwitchNavigator, createStackNavigator, createAppContainer } from 'react-navigation';

// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
// goes here.

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
));

After the user goes to the SignInScreen and enters their credentials, you would then call

this.props.navigation.navigate('App');

---

We can fix it by setting headerLeft to null

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

---

i think it is simple just add headerLeft : null , i am using react-native cli, so this is the example :

static navigationOptions = {
    headerLeft : null
};

---

For latest version of React Navigation, even if you use null in some cases it may still show "back" written!

Go for this in your main app.js under your screen name or just go to your class file and add: -

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

---

In Latest Version (v2) works headerLeft:null. you can add in controller's navigationOptions as bellow

static navigationOptions = {
    headerLeft: null,
};

---

For react-navigation version 4.x

navigationOptions: () => ({
      title: 'Configuration',
      headerBackTitle: null,
      headerLayoutPreset:'center',
      headerLeft: null
    })

참고URL : https://stackoverflow.com/questions/42831685/disable-back-button-in-react-navigation