web-dev-qa-db-ja.com

React Navigation v5はリセットせず、以前のルートを削除しません

スタックに配置したログイン画面があります。ユーザーが正常にログインすると、引き出し画面であるホーム画面にリダイレクトされます。ドロワー画面のオプションの1つはログアウトです。そのため、クリックするとユーザーはログアウトされます。以下は、ログアウト画面のコードです。 uiでログアウト画面の進行状況バーを表示しているだけですが、useEffectフックで、次のメソッドを呼び出しています

navigation.navigate({index: 0, routes: [{name: LOGIN_SCREEN}]});

しかし、You need to specify name or key when calling navigate with an object as the argumentとホーム画面にリダイレクトされます。アプリを完全に再起動すると、ログイン画面に移動するだけです。名前キーに正しい値を渡しています。

ナビゲーションスタックは次のようになります

 <Stack.Navigator>

      <Stack.Screen
        name={LOGIN_SCREEN}
        component={LoginScreen}
        options={{headerShown: false}}
      />
     <Stack.Screen
        name={HOME_STACK_SCREEN}
        component={DrawerStack}
        options={{headerShown: false}}
      />...

私の引き出しコンポーネントは次のとおりです

<Drawer.Navigator
      drawerStyle={{backgroundColor: BLUE_COLOR_1}}
      drawerContentOptions={{labelStyle: {color: '#FFF'}}}>
      <Drawer.Screen
        name={HOME_SCREEN}
        component={Home}
        options={{
         ...
        }}
      />
     <Drawer.Screen
        name={LOGOUT_SCREEN}
        component={Logout}
        options={{
         ...
        }}
      />
react-nativereact-navigation-v5
2
Nudge

リセットする場合は、resetではなくnavigateを使用する必要があります。

navigation.reset({
  routes: [{ name: LOGIN_SCREEN }]
});
2
satya164

反応ナビゲーションv5。このようにナビゲーションをリセットできます

import { CommonActions } from "@react-navigation/native";

this.props.navigation.dispatch(
     CommonActions.reset({
        index: 0,
        routes: [{ name: "LOGIN_SCREEN" }],
    })
);
3
Shahnawaz Hussain