반응 네이티브 탐색 (반응 탐색) 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
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,
}
반응 탐색 버전> = 1.0.0-beta.9
navigationOptions: {
headerLeft: null
}
이 상황을 처리하는 가장 좋은 방법은 React navigation에서 제공하는 SwitchNavigator를 사용하는 것 입니다. SwitchNavigator의 목적은 한 번에 한 화면 만 표시하는 것입니다. 기본적으로 백 액션을 처리하지 않으며 전환 할 때 경로를 기본 상태로 재설정합니다. 이것은 인증 흐름에 필요한 정확한 동작입니다.
이것은 그것을 구현하는 일반적인 방법입니다.
다음은 위 명령문의 코드 구현입니다.
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from "./homeScreenPath"
import OtherScreen from "./otherScreenPath"
import SignInScreen from "./SignInScreenPath"
import SplashScreen from "./SplashScreenPath"
const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });
export default createAppContainer(
createSwitchNavigator(
{
Splash: SplashScreen,
App: AppStack,
Auth: AuthStack,
},
{
initialRouteName: 'Splash',
}
)
);이제 SplashScreen에서 토큰을 확인하고 그에 따라 탐색합니다.
import React from 'react';
import {
ActivityIndicator,
AsyncStorage,
StatusBar,
StyleSheet,
View,
} from 'react-native';
class SplashScreen extends React.Component {
componentDidMount() {
this.checkIfLogin();
}
// Fetch the token from storage then navigate to our appropriate place
checkIfLogin = async () => {
const userToken = await AsyncStorage.getItem('userToken');
// This will switch to the App screen or Auth screen and this splash
// screen will be unmounted and thrown away.
this.props.navigation.navigate(userToken ? 'App' : 'Auth');
};
// Render any loading content that you like here
render() {
return (
<View>
<ActivityIndicator />
<StatusBar barStyle="default" />
</View>
);
}
}SwitchNavigator에서 경로를 변경하면 이전 경로가 자동으로 제거되므로 뒤로 버튼을 누르면 더 이상 인증 / 로그인 화면으로 이동하지 않습니다.
headerLeft를 null로 설정하여 수정할 수 있습니다.
static navigationOptions =({navigation}) => {
return {
title: 'Rechercher une ville',
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',
}
));
사용자가 SignInScreen으로 이동하여 자격 증명을 입력하면 다음을 호출합니다.
this.props.navigation.navigate('App');
최신 버전의 React Navigation의 경우 경우에 따라 null을 사용하더라도 "뒤로"작성된 것으로 표시 될 수 있습니다!
화면 이름 아래 의 기본 app.js 에서이를 수행하거나 클래스 파일 로 이동하여 다음 을 추가하십시오.-
static navigationOptions = {
headerTitle:'Disable back Options',
headerTitleStyle: {color:'white'},
headerStyle: {backgroundColor:'black'},
headerTintColor: 'red',
headerForceInset: {vertical: 'never'},
headerLeft: " "
}
반응 탐색 버전 4.x의 경우
navigationOptions: () => ({
title: 'Configuration',
headerBackTitle: null,
headerLayoutPreset:'center',
headerLeft: null
})
headerLeft: null
이것은 최신 반응 네이티브 버전에서 작동하지 않습니다.
그것은해야한다:
navigationOptions = {
headerLeft:()=>{},
}
Typescript의 경우 :
navigationOptions = {
headerLeft:()=>{return null},
}