react-native - 如何从 react-native 中的选项卡堆栈注销到身份验证？

问题描述

我的申请流程如下：-

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我已经放置了带有注销按钮的标题，如下所示。

<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');=> 什么都没发生

我也从这里尝试这种方法

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);
        }} />
    }
}

发现了一些东西：- 在 TabHelper 文件上，如果我继续删除const AppContainer = createAppContainer(tabScreen);（用于处理 HomeScreen 焦点处的后退按钮）并替换为export default createAppContainer(tabScreen);，我可以注销并导航到登录。这就像我需要选择一个。

我如何同时拥有这两个功能？处理“再次按下退出”的后退按钮并在选项卡助手处注销导航？

标签： react-nativereact-native-androidreact-navigationreact-native-cli

react-native - 如何从 react-native 中的选项卡堆栈注销到身份验证？

问题描述

解决方案

推荐阅读