如何在 React 本机 Drawer.Navigator 中添加注销按钮？

Question

我正在使用 Drawer.Navigator 在本机反应中创建抽屉。但问题是如果点击注销按钮如何移动到登录屏幕？

有什么建议吗？我的代码如下。所有剩余的代码都工作正常。我只想通过单击注销按钮来导航登录屏幕。

        import * as React from 'react';
    import { Button, View, Text, TouchableOpacity } from 'react-native';
    import {
      createDrawerNavigator, DrawerContentScrollView,
      DrawerItemList,
      DrawerItem,
    } from '@react-navigation/drawer';
    import { NavigationContainer } from '@react-navigation/native';
    import Resources from '../DrawerScreens/Resources';
    import Themes from '../DrawerScreens/Themes';
    import AboutUs from '../DrawerScreens/AboutUs';
    import CustomSidebarMenu from './CustomSidebarMenu';
    import Login from '../Validation/Login';


    const Drawer = createDrawerNavigator();

    export default function DrawerSetting({ navigation }) {

      return (
        <NavigationContainer independent={true} >
          <Drawer.Navigator initialRouteName="Resources" drawerContent={(props) => <CustomSidebarMenu {...props} />}
          >
            <Drawer.Screen name="Resources" component={Resources}
              options={{ drawerLabelStyle: { fontSize: 16, color: 'black', } }}
            />
            <Drawer.Screen name="Themes" component={Themes}
              options={{ drawerLabelStyle: { fontSize: 16, color: 'black', } }}
            />
            <Drawer.Screen name="About Us" component={AboutUs}
              options={{ drawerLabelStyle: { fontSize: 16, color: 'black', } }}
            />
          

          </Drawer.Navigator>
        </NavigationContainer>
      );
    }

我曾经创建了另一个用于创建注销按钮的组件，

                import React from 'react';
            import {
                SafeAreaView,
                View,
                StyleSheet,
                Image,
                Text,
                Linking,
                TouchableOpacity,
                BackHandler
            } from 'react-native';

            import {
                DrawerContentScrollView,
                DrawerItemList,
                DrawerItem, Drawer,
            } from '@react-navigation/drawer';

            const CustomSidebarMenu = (props) => {
                const BASE_PATH = '';

                function logout(){
                    alert("Hello");
                    // props.navigation.navigate("Login");
                    //  BackHandler.exitApp();
                }

                return (
                    <SafeAreaView style={{ flex: 1 }}>
                        {/*Top Large Image */}
                        <Image
                            source={require("../../assets/images/g_logo_blue.png")}
                            style={styles.sideMenuProfileIcon}
                        />
                        <DrawerContentScrollView {...props}>
                            <DrawerItemList {...props} />
                            {/* { <DrawerItem
                                label="Visit Us"
                                onPress={() => {props.navigation.navigate('Login')}}
                            /> } */}
                            {/* <View style={styles.customItem}>
                                <Text
                                    onPress={() => {
                                        Linking.openURL('https://aboutreact.com/');
                                    }}>
                                    Rate Us
                                </Text>
                                <Image
                                    source={{ uri: BASE_PATH + 'star_filled.png' }}
                                    style={styles.iconStyle}
                                />
                            </View> */}

                            <TouchableOpacity onPress={logout}>
                                <Text style={{ fontSize: 16, fontWeight: 'bold', textAlign: 'left', color: 'blue', marginLeft: 20, }}>
                                    Logout
                                </Text>
                            </TouchableOpacity>
                        </DrawerContentScrollView>

                        <Text style={{ fontSize: 16, textAlign: 'center', color: 'blue' }}>
                            https://www.glocoach.com/
                        </Text>

                    
                    </SafeAreaView>
                );
            };

            const styles = StyleSheet.create({
                sideMenuProfileIcon: {
                    // resizeMode: 'cover',
                    width: "70%",
                    height: 70,
                    marginTop: 20,
                    marginBottom: -40,
                    marginLeft: -50,
                    // borderRadius: 100 / 2,
                    alignSelf: 'center',
                },
                iconStyle: {
                    width: 15,
                    height: 15,
                    marginHorizontal: 5,
                },
                customItem: {
                    padding: 16,
                    flexDirection: 'row',
                    alignItems: 'center',
                },
            });

            export default CustomSidebarMenu;

Answer 1

在这种情况下，我通常会做两个导航器。一个用于注销屏幕，一个用于登录屏幕。然后我会将它绑定到一个签入 JSX，例如：

<NavigationContainer>
  {!isLoggedIn ? (<LoggedOutNavigator />) : (<LoggedInNavigator />)}
</NavigationContainer>

之后，当按下按钮时，您所要做的就是更改 isLoggedIn 值。您可以将 isloggedIn 保存在 redux 中，然后发送一个操作来处​​理更改。

如果您只有一个导航器并且真的不想更改它，那么您可以添加一个 useEffect 挂钩，以便在将 isLoggedIn 设置为 false 后导航到登录屏幕。