Question

我正在尝试在我的本机抽屉导航器中执行注销功能。但是我不知道该怎么做。我将令牌存储在asyncstorage中，我需要注销并同时清除asyncstorage。这是我的代码，有人知道吗？

const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
export default class SideMenu extends Component   {

  render(){
    createHomeStack = () => 
    <Stack.Navigator>
      <Stack.Screen name="Upcoming Activities" component={HomeScreen} 
        options={{
        headerStyle: {backgroundColor: '#87CEFA',},
        headerTintColor: '#fff',
        headerTitleStyle: {fontWeight: 'bold',}
        }} />
      <Stack.Screen name="Details" component={DetailsScreen}
        options={{headerStyle: {backgroundColor: '#87CEFA',},
        headerTintColor: '#fff',
        headerTitleStyle: {fontWeight: 'bold',}
        }}/>
    </Stack.Navigator>

    createYourStack = () => 
    <Stack.Navigator>
      <Stack.Screen name="Your Activities" component={YourActivitiesScreen} 
        options={{
        headerStyle: {backgroundColor: '#87CEFA',},
        headerTintColor: '#fff',
        headerTitleStyle: {fontWeight: 'bold',}
        }} />
      <Stack.Screen name="Details" component={DetailsScreen}
        options={{headerStyle: {backgroundColor: '#87CEFA',},
        headerTintColor: '#fff',
        headerTitleStyle: {fontWeight: 'bold',}
        }}/>
    </Stack.Navigator>

    return (
      <NavigationContainer>
        <Drawer.Navigator initialRouteName="Home">
          <Drawer.Screen 
            name="Home"
            children={createHomeStack}
            options={{ drawerLabel: 'Home' }}
          />
          <Drawer.Screen
            name="Your Activities"
            children={createYourStack}
            options={{ drawerLabel: 'Your Activities' }}
          />
          <Drawer.Screen
            name="Logout"
            //component={}
            options={{ drawerLabel: 'Logout' }}
          />
        </Drawer.Navigator>
      </NavigationContainer>
    )

  }
}

更新问题：我需要在抽屉式导航器中按注销时将其定向到登录名，但是我的登录屏幕使用的是来自“ react-native-router-flux”的路由器

export default class Routes extends Component {
    render() {
        return(
            <Router>
                <Stack key="root" hideNavBar>
                    <Scene key="login" component={Login} title="Login" initial/>
                    <Scene key="signup" component={Signup} title="Signup" />
                    <Scene key="home" component={SideMenu} title="HomeScreen" />
                </Stack>
            </Router>
        );
    }
}

Answer 1

您可以在“注销”屏幕中执行以下操作：

import React, { Component } from "react";
import { View } from "react-native";
import { AsyncStorage } from 'react-native';

class LogoutScreen extends Component{
    componentDidMount(){
        AsyncStorage.removeItem("yourKey");
        this.props.navigation.navigate('RouteName eg:Home');
    }
    render(){
        return(
         <View style={{alignItems:'center',justifyContent:'center',flex:1}}>
         </View>
        );
    }
}
export default LogoutScreen;

希望这会有所帮助！

在DrawerNavigator中反应本机注销

1 个答案: