使用 react Native DrawerNavigator 注銷

Question

我正在構建一個 react-native 應用程序（ App Image ），它在 Drawer Navigator 上有注銷鏈接。

代碼如下

 const DrawerScreen = DrawerNavigator({
    ..........
    logout: {
        screen: Component   
    },
})

export default DrawerScreen;

但問題是，它只是加載組件屏幕。 我需要調用一個方法，我可以在其中執行 Asyncstorage clear 並導航到 LoginPage。

Answer 1

您可能想在抽屜中添加一個按鈕。 如果是這樣，您的代碼將如下所示。

const Drawer = DrawerNavigator(
{
    mainpage:{screen:MyScreen}
},
{
    contentComponent:(props) => (
        <View style={{flex:1}}>
            <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
                <DrawerItems {...props} />
                <Button title="Logout" onPress={DO_SOMETHING_HERE}/>
            </SafeAreaView>
        </View>
    ),
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle'
})

您應該import {DrawerItems} from 'react-navigation';導入import {DrawerItems} from 'react-navigation'; 讓它工作。

更新：

1. 在 4.x 版本的 react-navigation 中，您應該從'react-navigation-drawer'導入 `import {DrawerNavigatorItems}
2. 您應該從“react-native-safe-area-view”導入SafeAreaView

Answer 2

const DrawerNavigation = createDrawerNavigator(
  {
    Mainpage: {
      screen: Mainpage
    }
  },
  {
    contentComponent:(props) => (
      <View style={{flex:1}}>
          <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
            <DrawerItems {...props} />
            <TouchableOpacity onPress={()=>
              Alert.alert(
                'Log out',
                'Do you want to logout?',
                [
                  {text: 'Cancel', onPress: () => {return null}},
                  {text: 'Confirm', onPress: () => {
                    AsyncStorage.clear();
                    props.navigation.navigate('Login')
                  }},
                ],
                { cancelable: false }
              )  
            }>
              <Text style={{margin: 16,fontWeight: 'bold',color: colors.textColor}}>Logout</Text>
            </TouchableOpacity>
          </SafeAreaView>
      </View>
    ),
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle'
  }
);

Answer 3

您可以使用 Component 類來執行 Asyncstorage 清除和導航登錄頁面。 如果你使用 react-navigation this.props 有導航對象。

class YourComponent extends Component {
    constructor(props) {
        super(props);
     }

    componentWillMount() {
        Asyncstorage.clear();
        this.props.navigation.navigate('LoginPage')
    }
}
export default YourComponent;

Answer 4

import {StyleSheet,AsyncStorage,Alert, View,SafeAreaView, Text, ActivityIndicator, Dimensions, TextInput,Image, TouchableOpacity, TouchableHighlight} from 'react-native';
import {DrawerItems,DrawerActions} from 'react-navigation-drawer';

 {
            contentComponent:(props) => (
              <View style={{flex:1}}>
                <SideMenu {...props}/>
                    <DrawerItems {...props} />
                    <TouchableOpacity onPress={()=>
                      Alert.alert(
                        'Log out',
                        'Do you want to logout?',
                        [
                          {text: 'Cancel', onPress: () => {this.props.navigation.dispatch(DrawerActions.closeDrawer()) }},
                          {text: 'Confirm', onPress: () => {
                            AsyncStorage.clear();
                            props.navigation.navigate('LoginScreen')
                          }},
                        ],
                        { cancelable: false }
                      )
                    }>
                      <Text style={{margin: 16,fontWeight: 'bold',color: 'red'}}>Logout</Text>
                    </TouchableOpacity>
              </View>
            ),
            drawerOpenRoute: 'DrawerOpen',
            drawerCloseRoute: 'DrawerClose',
            drawerToggleRoute: 'DrawerToggle'
    },

Answer 5

您可以創建一個模態來為您執行此操作。 單擊注銷-> 使用可見屬性顯示模態，然后單擊是，然后關閉模態-> 導航到登錄屏幕。

Answer 6

只需使用 AlertView 兄弟，這將有所幫助，但在上面的示例中，如果您有一個比這個標題 (this.props.navigation.navigate('LoginPage'))

不會有任何意義

您的視圖將加載到標題下方

Answer 7

如果您正在導航版本 5 和功能組件中尋找答案：

  const getActiveRouteState = function (
    routes: Route<string>[],
    index: number,
    name: string
  ) {
    return routes[index].name.toLowerCase().indexOf(name.toLowerCase()) >= 0;
  };

function CustomDrawerContent(
    props: DrawerContentComponentProps<DrawerContentOptions>
  ) {
    return (
      <View style={{ flex: 1 }}>
        <DrawerContentScrollView {...props}>
          <View>
            <DrawerItem
              icon={({ color, size }) => <Icon type='AntDesign' name='home' />}
              label='Home'
              focused={getActiveRouteState(
                props.state.routes,
                props.state.index,
                'Home'
              )}
              onPress={() => {
                props.navigation.navigate('Home');
              }}
            />
            <DrawerItem
              icon={({ color, size }) => (
                <Icon type='AntDesign' name='minuscircle' />
              )}
              label='Test'
              focused={getActiveRouteState(
                props.state.routes,
                props.state.index,
                'Test'
              )}
              onPress={() => {
                props.navigation.navigate('Test');
              }}
            />
            <DrawerItem
              icon={({ color, size }) => (
                <Icon type='AntDesign' name='logout' />
              )}
              label='LogOut'
              onPress={async () => {
                await logoutUser();
                setLogginState(false);
              }}
            />
          </View>
        </DrawerContentScrollView>
      </View>
    );
  }

      const AppDrawer = createDrawerNavigator();
      const AppDrawerScreen = () => (
        <AppDrawer.Navigator
          drawerPosition='left'
          drawerContent={(props) => <CustomDrawerContent {...props} />}
        >
          <AppDrawer.Screen
            name='Home'
            component={HomeScreen}
            options={{ drawerLabel: 'Home' }}
          />
          <AppDrawer.Screen name='Test' component={TestScreen} />
        </AppDrawer.Navigator>
      );

如果您想隱藏抽屜中的選項，這也將為您提供幫助。

Answer 8

這是一種使用 react-navigation 庫在抽屜中實現注銷的方法。

<Drawer.Screen
    name="Logout"
    component={<Any Dummy Component>}
    listeners={({ navigation }) => ({ 
        state: (e) => {
           if (e.data.state.index === 3) {
              // 3 is index of logout item in drawer

              navigation.replace("Login")
           }
        }
    })}
/>