在我本人的情况下,当我单击注销按钮时,在本机中实现注销功能的最佳方法是什么,它可以正常工作,但是下次再次登录并单击它时,则不起作用。
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',
},
});
答案 0 :(得分:0)
我实现了在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);
}
}}
/>
这是您的Darwer菜单:
createDrawerNavigator(
{
...
Logout: {
screen: Choose,
navigationOptions: {
title: 'Logout',
drawerIcon: <Image source={iconRedExit} style={styles.icon} />,
},
},
},
{
initialRouteName: 'Tests',
contentComponent: CustomDrawer,
drawerWidth: width,
},
),
在您的CustomDrawer render()中,您可以使用我的答案中的DrawerItems