私はreactnativeナビゲーション（react-navigation）StackNavigatorを使用しています。これは、アプリのライフサイクル全体を通じてログインページから始まります。ログイン画面に戻るという戻るオプションは必要ありません。ログイン画面の後に画面に非表示にする方法を知っている人はいますか？ところで、私はまた、以下を使用してログイン画面にそれを隠しています：
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）ナビゲーションスタックをクリーンアップする場合：
ナビゲートしたい画面が表示されていると仮定します。
あなたが反応し、ナビゲーションバージョン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" )。
このようにして、スタックに何も追加しません。そのため、Androidで戻るボタンを押したり、IOSで画面を右にスワイプしたりしても、HomeScreenは何も振って戻ることはありません。
詳細については、ドキュメントを確認してください。そしてもちろん、あなたが設定することで、戻るボタンを非表示にすることができますheaderLeft: nullでnavigationOptions
私たちは、偽を設定する必要があるgesturesEnabledと一緒にheaderLeftしますnull。画面をスワイプして戻ることもできるからです。
navigationOptions: {
title: 'Title',
headerLeft: null,
gesturesEnabled: false,
}
を使用して戻るボタンを非表示にすることができますleft:nullが、Androidデバイスの場合、ユーザーが戻るボタンを押したときに戻ることができます。ナビゲーション状態をリセットし、ボタンを非表示にする必要がありますleft:null
ナビゲーション状態をリセットするためのドキュメントは次のとおりです：https：
//reactnavigation.org/docs/navigation-actions#reset
このソリューションは、のために働くんreact-navigator 1.0.0-beta.7しかし、left:nullもはや最新バージョンで動作します。
react-navigationバージョン> = 1.0.0-beta.9
navigationOptions: {
headerLeft: null
}
この状況を処理するための最良のオプションは、Reactナビゲーションが提供するSwitchNavigatorを使用することです。SwitchNavigatorの目的は、一度に1つの画面のみを表示することです。デフォルトでは、バックアクションを処理せず、スイッチを切るとルートがデフォルトの状態にリセットされます。これは、認証フローで必要とされる正確な動作です。
これは、それを実装するための典型的な方法です。
上記のステートメントのコード実装は次のとおりです
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');
ReactNavigation v 5.0-スタックオプション：
options={{
headerLeft: () => {
return <></>;
}
}}
React Navigationの最新バージョンでは、nullを使用しても、「戻る」と書かれている場合があります。
あなたの中で、このために行くのメインapp.jsあなたのスクリーン名の下またはちょうどあなたに行くクラスファイルと追加します-
static navigationOptions = {
headerTitle:'Disable back Options',
headerTitleStyle: {color:'white'},
headerStyle: {backgroundColor:'black'},
headerTintColor: 'red',
headerForceInset: {vertical: 'never'},
headerLeft: " "
}
react-navigationバージョン4.xの場合
navigationOptions: () => ({
title: 'Configuration',
headerBackTitle: null,
headerLayoutPreset:'center',
headerLeft: null
})