如何从本机选项卡堆栈中注销到身份验证?

问题描述 投票:0回答:1

我的申请流程如下:-

App.js
│
└── AppSwitchNavigator
            └── MainSplash: { screen: SplashScreen }
            └── Auth: { screen: AuthStack } // createStackNavigator
            │       └── SignIn: { screen: MainSignIn }
            │       └── Register: { screen: MainRegister }
            │
            └── Dashboard: { screen: TabHelper } // createBottomTabNavigator
                    └── Home: { screen: HomeStack }
                    └── Favourite: { screen: FavouriteScreen }
                    └── Cart: { screen: CartStack }
                    └── Profile: { screen: ProfileStack }
                            └── MainProfile: { screen: ProfileScreen }
                            └── ChangePassword: { screen: PasswordScreen }
                            └── TrackOrder: { screen: TrackStack }

ProfileScreen上,我已将标题与注销按钮放置在一起,如下所示。enter image description here

<Header >
  <Left style={{ flex: null }}>
  </Left>
  <Body style={{ flex: 3 }}>
    <Title style={{ marginLeft: 10, }}>User Profile</Title>
  </Body>
  <Right style={{ flex: null }}>
    <Button hasText transparent onPress={() => Alert.alert(
      'Log out',
      'Do you want to logout?',
      [
        { text: 'Cancel', onPress: () => { return null } },
        { text: 'Confirm', onPress: () => { this.Func_LogoutUser() } },
      ],
      { cancelable: false }
    )}>
      <Text>Logout</Text>
    </Button>
  </Right>
</Header>

我无法注销到Auth开关。我尝试过:-

this.props.navigation.navigate('Auth'); =>什么都没发生

我也在here中尝试这种方法

const subAction = NavigationActions.navigate({ routeName: 'SignIn' });
AsyncStorage.clear().then(() => {
  this.props.navigation.navigate('Auth', {}, subAction);

});

添加额外脚本

当前的TabHelper脚本:-

const tabScreen = createBottomTabNavigator(
    {
        'Home': {screen: HomeStack},
        'Favourite': {screen: FavouriteScreen},
        'Cart': {screen: CartStack},
        'Profile': {screen: profileStack}
    },
    {
        initialRouteName: 'Home',
        headerMode: 'none',
        backBehavior: 'initialRoute',
        defaultNavigationOptions: ({ navigation }) => ({
            tabBarOnPress: ({ navigation, defaultHandler }) => {
                navigation.popToTop();
                defaultHandler();
            },
        }),
    }
);
const AppContainer = createAppContainer(tabScreen);
var screen = '';
let isExit = true;
let lastBackPressed = null;
export default class tabHelper extends Component {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
    }

    componentWillUnmount() {
        BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
        lastBackPressed = null;
    }

    onBackAndroid() {
        if (isExit) {
            if (lastBackPressed && lastBackPressed + 2000 >= Date.now()) {
                BackHandler.exitApp();
                return true;
            }
            lastBackPressed = Date.now();
            ToastAndroid.show('Press again to exit the app', ToastAndroid.SHORT);
            return true;
        }
        return false
    }
    getActiveRouteName(navigationState) {
        if (!navigationState) {
          return null;
        }
        const route = navigationState.routes[navigationState.index];
        if (route.routes) {
          return this.getActiveRouteName(route);
        }
        return route.routeName;
      } 
    render() {
        return <AppContainer onNavigationStateChange={(prevNav, nav, action) => {
            screen = this.getActiveRouteName(nav)
            var routes = nav.routes;
            var currentRoutes = routes[routes.length - 1];
            if (screen === 'MainHome') {
                if (currentRoutes.routes[currentRoutes.index].index == undefined || currentRoutes.routes[currentRoutes.index].index == 0) {
                    isExit = true;
                } else {
                    isExit = false;
                }
            } else {
                isExit = false;
            }
        }} ref={navigatorRef => {
            NavigationService.setTopLevelNavigator(navigatorRef);
        }} />
    }
}
react-native react-native-android react-navigation react-native-cli
1个回答
0
投票
尝试此操作,您需要进入屏幕而不是堆栈,或者如果您的堆栈中有defaultRoute,那么它将可以导航到那里:
© www.soinside.com 2019 - 2024. All rights reserved.