react-native - 当我有一个转换为组件时的第二个抽屉菜单

Question

我已经实现了一个抽屉菜单，我需要在我的应用程序右侧实现第二个抽屉菜单。

那是源代码：

应用程序.js

import React from 'react';
import { StyleSheet} from 'react-native';
import { Block, Text } from "expo-ui-kit";
import { NavigationContainer} from "@react-navigation/native"

import Drawer from './Drawer';


Text.defaultProps = Text.defaultProps || {};
Text.defaultProps.allowFontScaling = false;


export default function App() {

 
  return (
    <NavigationContainer>
      <Drawer/>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

抽屉.js

import React from 'react';
import { Image , StyleSheet, Text  } from 'react-native';
import { Block, Button} from "expo-ui-kit";
import { DrawerItem, createDrawerNavigator , DrawerContentScrollView } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';
import { Feather, AntDesign, Entypo, MaterialCommunityIcons, Ionicons, Fontisto, FontAwesome5 } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';

import Wellcome from "./screens/Wellcome";
import Animated, { color } from 'react-native-reanimated';

<paginas de secciones>

const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();

Text.defaultProps = Text.defaultProps || {};
Text.defaultProps.allowFontScaling = false;


const Screens = ({ navigation, style }) =>{
    return (
    <Animated.View animated style={[{ flex: 1, overflow: "hidden" },style]}>
     <Stack.Navigator 
        screenOptions={{
         headerTransparent: true,
         headerTitle: '',
         headerLeft: () =>(
             <Button padding transparent marginHorizontal onPress={() => navigation.openDrawer()}>
                 <Feather name="menu" size={30}/>
             </Button>
         )

     }}>
        <Stack.Screen name="Wellcome" component={Wellcome} />
        <Stack.Screen 
                        name="Seccion" 
                        component={Seccion} 
                        options={{ headerTitle: '',
                        headerTintColor: '#115f6d', }} /> 

        <Stack.Screen name="OtrasSecciones" component={OtrasSecciones} options={{
                            headerTitle: '',
                            headerTintColor: '#115f6d',
                                }} />
       
    </Stack.Navigator>
    </Animated.View>
    );
};

// Diseño del menu del Drawer Menu

const DrawerContent = props => {
    return (
        <DrawerContentScrollView {...props} contentContainerStyle={{ flex: 1}}>
            <Block>
                <Block flex={0.21} margin={0} middle>
                    <Image source={{ 
                        uri: './imagenes/logo.png',
                        height: 70,
                        width: 220
                        }}
                        resizeMode="contain"
                        style={{ borderRadius: 10 }}
                        />
                        <Text style={ styles.NumVersion }>Versión 1.3</Text>
             </Block>
            <Block>
            <DrawerItem
                label="Estudios"
                labelStyle={{ color: "#373433", fontSize: 17, marginLeft: -16 }}
                onPress={()=> props.navigation.navigate("Seccion", {idt: "1", filtro: "1", nombreSeccion: "sec1"})}
                icon={() => <AntDesign name="book" size={17} color="gray"/>}
            />
            <DrawerItem
                label="Otras.."
                labelStyle={{ color: "#373433", fontSize: 17, marginLeft: -16 }}
                onPress={()=> props.navigation.navigate("Seccion", {idt: "6", filtro: "1", nombreSeccion: "sec2"})}
                icon={() => <Feather name="book-open" size={17} color="gray"/>}
            />
          
            </Block>
            </Block>
        </DrawerContentScrollView>
    );
};

const styles = StyleSheet.create({
    NumVersion: {
        fontSize: 10,
        paddingLeft: 13,
        color: "#000"
    }
});



export default() => {

    const [progress, setProgres] = React.useState(new Animated.Value(0));

    const scale = Animated.interpolate(progress, {
        inputRange: [0,1],
        outputRange: [1, 0.8]
    });

    const borderRadius = Animated.interpolate(progress, {
        inputRange: [0,1],
        outputRange: [0, 10]
    });

    const screensStyles = { borderRadius, transform: [{ scale }]};
   
    return (
    <LinearGradient style={{ flex: 1}} colors={["white","#F5EEEC"]}>
    <Drawer.Navigator 
        drawerType="slide"
        overlayColor="transparent"
        initialRouteName="Wellcome" 
        drawerStyle={{ width: "75%", backgroundColor: "transparent" }}
        // contentContainerStyle = {{ flex: 1 }}
        drawerContentOptions={{
            activeBackgroundColor: 'transparent',
            activeTintColor: 'blue',
            inactiveTintColor: 'blue',
        }}
        sceneContainerStyle={{ backgroundColor: "transparent" }}
        drawerContent={props =>{
            setProgres(props.progress);
            return  <DrawerContent {...props} />
            }}
    >
        <Drawer.Screen name="Screens">
            {props => <Screens {...props} style={screensStyles} />}
        </Drawer.Screen>
     </Drawer.Navigator>
     </LinearGradient>
    );
};

我在互联网上发现我必须添加这个：

 headerRight: () =>(
             <Button padding transparent marginHorizontal onPress={() => navigation.openDrawer()}>
                 <Feather name="menu" size={30}/>
             </Button>
         )

然后汉堡图标出现在右侧..

我有各种各样的问题...

我想我必须删除抽屉的 Stack.Navigator 才能将其转换为组件，但我不知道如何制作它。

此外，我不知道如何从 navigation.openDrawer() 调用来打开我想要的抽屉之一..

任何人都可以帮助我好吗！！

标签： react-native