Блог

Я создаю ящик в react native с помощью 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;
 

Обычно в этой ситуации я бы сделал два навигатора. Один для экранов выхода из системы и один для экранов входа в систему. Тогда я бы привязал это к регистрации в JSX, например:

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

После этого все, что вам нужно сделать при нажатии кнопки, — это изменить значение isLoggedIn. вы можете сохранить isLoggedIn в redux, а затем просто отправить действие для обработки изменений.

если у вас есть только один навигатор и вы действительно не хотите его менять, вы можете добавить крючок useEffect для перехода на экран входа в систему, как только для isLoggedIn будет установлено значение false.