如何在react native中使用component组件的属性中的另一个屏幕打开抽屉

npm install @react-navigation/native

import React from 'react';
import { View, Text } from 'react-native';

const DrawerContent = () => {
  return (
    <View>
      <Text>抽屉内容</Text>
    </View>
  );
};

export default DrawerContent;

import React from 'react';
import { View, Text } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import DrawerContent from './DrawerContent';

const Drawer = createDrawerNavigator();

const MainScreen = () => {
  return (
    <View>
      <Text>主屏幕</Text>
    </View>
  );
};

const App = () => {
  return (
    <Drawer.Navigator drawerContent={props => <DrawerContent {...props} />}>
      <Drawer.Screen name="Main" component={MainScreen} />
    </Drawer.Navigator>
  );
};

export default App;

import React from 'react';
import { View, Text, Button } from 'react-native';

const DrawerContent = ({ navigation }) => {
  const openDrawer = () => {
    navigation.openDrawer();
  };

  return (
    <View>
      <Text>抽屉内容</Text>
      <Button title="打开抽屉" onPress={openDrawer} />
    </View>
  );
};

export default DrawerContent;