Блог

Я учусь реагировать на родной язык. Я создал экран ящика в приложении react native. Все хорошо. Я хочу открыть экран на изображении заголовка щелчком ящика.

Как я могу перейти на другой экран при нажатии кнопки выхода из системы или при нажатии на изображение заголовка? При нажатии на меню ящика он работает нормально.

Но я сталкиваюсь и с проблемой — >

   **console.error: The action 'NAVIGATE' with payload {"name":"DrawerSetting"} was not handled by any navigator.
 

У вас есть экран с названием «Рисование»?
Если вы пытаетесь перейти к экрану во вложенном навигаторе, см. раздел https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.**

DrawerSetting.js

         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';
    import AsyncStorage from '@react-native-async-storage/async-storage';


    const Drawer = createDrawerNavigator();

    export default function DrawerSetting({ navigation }) {

    //   AsyncStorage.getItem("isLogin").then((val)=>{
    //     console.log(AsyncStorage.getItem("isLogin ="   val));
    // })

    // AsyncStorage.getItem("userId").then((val)=>{
    //     console.log(AsyncStorage.getItem("userId ="   val));
    // })

    // AsyncStorage.getItem("password").then((val)=>{
    //     console.log(AsyncStorage.getItem("password ="   val));
    // })

    AsyncStorage.getItem("userId").then((val)=>{
      console.log("Drawer valuse are="   val);
    });
            



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


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

CustomSidebarMenu.js

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

        import {
            DrawerContentScrollView,
            DrawerItemList,
            DrawerItem, Drawer,
        } from '@react-navigation/drawer';
        import RNExitApp from 'react-native-exit-app';
        import AsyncStorage from '@react-native-async-storage/async-storage';

        const CustomSidebarMenu = (props) => {


            const BASE_PATH = '';

            function logout() {
                props.navigation.navigate('Login') ;
            }

            //remove session data
            removeSessionAndlogout = async() => {
                await AsyncStorage.setItem("isLogin", "false");
                await AsyncStorage.setItem("userId", "");
                await AsyncStorage.setItem("password", "");
                // getSessionValues();
                await console.log("logout success");
                await  RNExitApp.exitApp();

            };


            return (
                <SafeAreaView style={{ flex: 1 }}>
                    {/*Top Large Image */}
                    <TouchableOpacity 
                    onPress={() => {alert("Hi") }}
                    >
                    <Image
                        source={require("../../assets/images/g_logo_blue.png")}
                        style={styles.sideMenuProfileIcon}
                    
                    />
                    </TouchableOpacity>

                    <DrawerContentScrollView {...props}>
                        <DrawerItemList {...props} />
                        {/* {<DrawerItem
                            label="Visit Us"
                            // onPress={() => { props.navigation.navigate('App', { screen: '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: 'black', marginLeft: 20, marginTop: 15 }}>
                                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;