如何在React Native中清除抽屉导航器中的屏幕

时间:2019-02-05 12:29:07

标签: react-native

const drawerNavigator = createDrawerNavigator({
  HomeScreen: {
    screen: customstack,
    navigationOptions: {drawerLabel: () => null}
  },

  ContactAdmin : {screen : ContactAdmin},

  ResetPasswordScreen: {
    screen: ResetPassword,
    navigationOptions: {drawerLabel: 'Reset Password',}
  },

  LogoutScreen: {
    screen: Logout,
    navigationOptions: {drawerLabel: 'Logout',}
  },
  NoNetwork : { screen : NoNetwork }
},
  {
    initialRouteName: 'HomeScreen',
       gesturesEnabled: true,
     style: {
      leftDrawerWidth: 40,
    },
    drawerPosition :"left",   contentComponent:SideMenu,
    contentOptions: {
        activeTintColor: '#e91e63',
      },
      navigationOptions: ({ navigation }) => ({


         headerTitle: (
           <View style={{flexDirection : 'row',flex :1,justifyContent:'center'}}>
          <Image style={{width: 70, height: 40,backgroundColor:'white'}}  source={require('./logo.png')} />
          </View>
          ),
           headerLeft:(<TouchableOpacity onPress={() =>navigation.toggleDrawer()}>
                         <Image style={{width: 25, height: 25,marginLeft:15}}  source={require('./menu.png')} />
                         </TouchableOpacity>),
           headerStyle: {
                        backgroundColor: '#008000'
                     }
           })
  },

  );

const RootStack = createStackNavigator({
  SplashScreen: { screen: SplashScreen },
  Login: { screen: Login },
  Signup: {screen: Signup},
  Home: {screen: drawerNavigator,

         },

}, {
  initialRouteName: 'SplashScreen',

})

const AppNavigator = createAppContainer(RootStack)
export default AppNavigator;

上面的代码被用作我的应用程序的导航器。当我进入重置密码并成功操作后,我现在进入抽屉式导航器。

await AsyncStorage.removeItem('uname', (err) => {

          this.props.navigation.navigate("Login")
          });

直到现在一切正常。在登录屏幕中输入新凭据后出现主要问题。它不带我进入HomeScreen,而是仅在resetpassword屏幕上。为什么会发生这种情况。成功登录后我打电话给

this.props.navigation.navigate("Home")

但是它也要输入重置密码。我该如何清除抽屉导航,以便在用新密码重新登录后,它又不会进入上一个屏幕,即ResetPassword

1 个答案:

答案 0 :(得分:1)

您将需要进行一次重置,这是他们文档中有关如何执行此操作的示例。我们之所以这样做,是因为我们希望避免回到以前的状态,而是从全新的导航状态开始。

import { StackActions, NavigationActions } from 'react-navigation';

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);

以及指向上述示例的链接:https://reactnavigation.org/docs/en/stack-actions.html