Как реализовать функцию выхода из системы в реагировать на родной

Question

Каков наилучший способ реализовать функцию выхода из системы в реагировать на себя в моем случае, когда я нажимаю кнопку выхода из системы, она работает нормально, но в следующий раз, когда я снова войду в систему и нажму на нее, это не работает.

import React, {Component} from 'react';
import {AsyncStorage} from 'react-native';
import {url} from '../globals';
import Toast from 'react-native-simple-toast';

class Logout extends Component {
  constructor(props) {
    super(props);
    this.onLogOutPressed = this.onLogOutPressed.bind(this);
  }
  static navigationOptions = {
    header: null,
  };
  componentWillMount() {
    this.onLogOutPressed();
    this.props.navigation.addListener('willFocus', this.onLogOutPressed);
  }
  async onLogOutPressed() {
    try {
      let response = await fetch(url + '/auth/Logout', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
      });
      if (response.status >= 200 && response.status < 300) {
        console.log('Request Status ', response.status);
        let res = await response.json();
        console.log('Logout response:', res);
        Toast.showWithGravity(res, Toast.LONG, Toast.CENTER);
        await AsyncStorage.clear();
        this.props.navigation.navigate('login');
      } else {
        throw 'Enable to parse';
      }
    } catch (error) {
      console.log('error ' + error);
    }
  }
  render() {
    return null;
  }
}
export default Logout;

И это стековый навигатор и навигация по ящикам, когда я нажимаю на кнопку выхода из системы в первый раз, когда она работает нормально, но во второй раз, когда она переходит ко мне на последнюю посещенную страницу

import React, {Component} from 'react';
import {
  StyleSheet,
  Dimensions,
  SafeAreaView,
  View,
  Text,
  ScrollView,
  Image,
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

import Login from './src/pages/Login';
import Companies from './src/admin/Companies';
import LicensesTable from './src/admin/VerifyLicenses';
import EditLicense from './src/admin/EditLicense';
import ActionEdit from './src/admin/EditLicenseDetails';
import PricingPlan from './src/admin/PricingPlan';
import {createStackNavigator} from 'react-navigation-stack';
import {createDrawerNavigator, DrawerItems} from 'react-navigation-drawer';
import {createSwitchNavigator, createAppContainer} from 'react-navigation';
import AdmDash from './src/admin/AdminDashboard';
import Users from './src/admin/Users';
import Logout from './src/pages/Logout';

global.currentScreenIndex = 0;
export default class App extends Component {
  render() {
    console.disableYellowBox = true;
    return  <Draw />;
  }
}

const CompaniesStackNavigator = createStackNavigator(
  {
    CompaniesNavigator: {screen: Companies},
  },
  {
    defaultNavigationOptions: ({navigation}) => {
      return {
        title: 'Companies',
        headerStyle: {backgroundColor: '#1D60D2'},
        headerTintColor: 'white',
        headerLeft: (
          <Icon
            style={{paddingLeft: 10, color: 'white'}}
            onPress={() => navigation.openDrawer()}
            name="md-menu"
            size={30}
          />
        ),
      };
    },
  },
);


const PricingStackNavigator = createStackNavigator(
  {
    PricingNavigator: {screen: PricingPlan},
  },
  {
    defaultNavigationOptions: ({navigation}) => {
      return {
        title: 'Pricing Plan',
        headerStyle: {backgroundColor: '#1D60D2'},
        headerTintColor: 'white',
        headerLeft: (
          <Icon
            style={{paddingLeft: 10, color: 'white'}}
            onPress={() => navigation.openDrawer()}
            name="md-menu"
            size={30}
          />
        ),
      };
    },
  },
);



const UserStackNavigator = createStackNavigator(
  {
    UserNavigator: Users,
  },
  {
    defaultNavigationOptions: ({navigation}) => {
      return {
        title: 'Users',
        headerStyle: {backgroundColor: '#1D60D2'},
        headerTintColor: 'white',
        headerLeft: (
          <Icon
            style={{paddingLeft: 10, color: 'white'}}
            onPress={() => navigation.openDrawer()}
            name="md-menu"
            size={30}
          />
        ),
      };
    },
  },
);


const DashboardStackNavigatorAdmin = createStackNavigator(
  {
    DashboardNavigator: {screen: AdmDash},
  },
  {
    defaultNavigationOptions: ({navigation}) => {
      return {
        title: 'Dashboard',
        headerStyle: {backgroundColor: '#1D60D2'},
        headerTintColor: 'white',
        headerLeft: (
          <Icon
            style={{paddingLeft: 10, color: 'white'}}
            onPress={() => navigation.openDrawer()}
            name="md-menu"
            size={30}
          />
        ),
      };
    },
  },
);

const LicensesStackNavigator = createStackNavigator(
  {
    LicensesNavigator: {screen: LicensesTable},
  },
  {
    defaultNavigationOptions: ({navigation}) => {
      return {
        title: 'Verify Licenses',
        headerStyle: {backgroundColor: '#1D60D2'},
        headerTintColor: 'white',
        headerLeft: (
          <Icon
            style={{paddingLeft: 10, color: 'white'}}
            onPress={() => navigation.openDrawer()}
            name="md-menu"
            size={30}
          />
        ),
      };
    },
  },
);

const LogoutStackNavigator = createStackNavigator({
  LogOutNAvigator: {
    screen: Logout,
  },
});

const AppNavigator = createStackNavigator({
  login: {screen: Login},
  EditLicense: {screen: EditLicense},
  ActionEdit: {screen: ActionEdit},
},
{
  initialRouteName: "login"
});



const AppDrawerNavigator = createDrawerNavigator(
  {
    login: {
      screen: AppNavigator,
      navigationOptions: {
        drawerLabel: () => null,
      },
    },
    Home: {
      screen: DashboardStackNavigatorAdmin,
      navigationOptions: {
        drawerLabel: () => 'Dashboard',
        drawerIcon: ({tintColor}) => (
          <Icon name="md-home" style={{fontSize: 24, color: tintColor}} />
        ),
      },
    },

    Users: {
      screen: UserStackNavigator,
      navigationOptions: {
        drawerIcon: ({tintColor}) => (
          <Icon name="md-person" style={{fontSize: 24, color: tintColor}} />
        ),
      },
    },

    'Pricing Plan':{
      screen:PricingStackNavigator,
      navigationOptions: {
        drawerIcon: ({tintColor}) => (
          <Icon name="md-pricetag" style={{fontSize: 24, color: tintColor}} />
        ),
      },
    },

    Licenses: {
      screen: LicensesStackNavigator,
      navigationOptions: {
        drawerIcon: ({tintColor}) => (
          <Icon name="md-briefcase" style={{fontSize: 24, color: tintColor}} />
        ),
      },
    },

    Companies: {
      screen: CompaniesStackNavigator,
      navigationOptions: {
        drawerIcon: ({tintColor}) => (
          <Icon name="md-card" style={{fontSize: 24, color: tintColor}} />
        ),
      },
    },

    Logout: {
      screen: LogoutStackNavigator,
      navigationOptions: {
        drawerIcon: ({tintColor}) => (
          <Icon name="md-log-out" style={{fontSize: 24, color: tintColor}} />
        ),
      },
    },
  },
  {
    contentComponent: props => (
      <SafeAreaView style={styles.container}>
        <View>
          <Image
            source={require('./src/Images/download.png')}
            style={styles.sideMenuProfileIcon}
          />
          <Text></Text>
        </View>
        <ScrollView>
          <DrawerItems {...props} />
        </ScrollView>
      </SafeAreaView>
    ),
    drawerWidth: Dimensions.get('window').width - 130,
  },
);

const AppSwitchNavigator = createSwitchNavigator({
  Dashboard: {screen: AppDrawerNavigator},
  Users: {screen: Users},
  Companies: {screen: Companies},
  Licenses: {screen: LicensesTable},
});

const Draw = createAppContainer(AppSwitchNavigator);

const styles = StyleSheet.create({
  IconS: {
    paddingLeft: 10,
  },
  HeaderStyle: {
    backgroundColor: '#1D60D2',
  },
  container: {
    flex: 1,
    alignContent: 'center',
    justifyContent: 'center',
  },
  sideMenuContainer: {
    width: '100%',
    height: '100%',
    backgroundColor: '#fff',
    alignItems: 'center',
    paddingTop: 20,
  },
  sideMenuProfileIcon: {
    resizeMode: 'center',
    width: 150,
    height: 150,
    marginTop: 20,
    borderRadius: 75,
    alignContent: 'center',
    justifyContent: 'center',
  },
});

Answer 1

Я понимаю, что выход из системы в Drawer без компонента, простая перегрузка onItemPress (пример Typescript):

<DrawerItems
      {...props}
      items={props.items.filter((i: any) => i.key !== 'UserProfile')}
      getLabel={({route}: Scene) => {
        const title = props.descriptors[route.key].options.title;
        return (
          <Text
            style={
              route.key !== 'Logout'
                ? styles.labelStyle
                : styles.labelExitStyle
            }>
            {t(title)}
          </Text>
        );
      }}
      //labelStyle={styles.labelStyle}
      itemStyle={styles.itemStyle}
      iconContainerStyle={styles.iconOpacity}
      onItemPress={({route}) => {
        if (route.key === 'Logout') {
          Alert.alert(
            t('Logout'),
            t('Are you sure you want to logout?'),
            [
              {
                text: t('Ok'),
                onPress: async () => {
                  const result = await clearProfile();
                  if (result) {
                    navigate('Choose');
                  }
                },
              },
              {text: t('Cancel'), style: 'cancel'},
            ],
            {
              cancelable: false,
            },
          );
        } else {
          navigate(route.key);
        }
      }}
    />

Это ваше дарверское меню:

createDrawerNavigator(
        {
          ...
          Logout: {
            screen: Choose,
            navigationOptions: {
              title: 'Logout',
              drawerIcon: <Image source={iconRedExit} style={styles.icon} />,
            },
          },
        },
        {
          initialRouteName: 'Tests',
          contentComponent: CustomDrawer,
          drawerWidth: width,
        },
      ),

В вашем CustomDrawer render () вы можете используйте DrawerItems из моего ответа