Reactjs 是否可以将导航抽屉与子页面进行交互？

我正在使用react native和react navigation drawer为导航屏幕生成一个侧菜单。 我的问题是：是否有一种方法或指南可以将子页面放在侧菜单中？
欢迎提出任何建议，并提前向您表示感谢 左侧显示我的菜单，右侧显示我想要的：

---

您可以使用

自定义抽屉内容

它有很多选择，请一定要阅读它不是所有的项目需要定制 我刚刚给你举了个例子

文献

从“React”导入React；
从“react native”导入{View，Text，TouchableOpacity}；
从'@react-navigation/native'导入{NavigationContainer}；
进口{
createDrawerNavigator，
DroperContentScrollView，
付款人，
抽屉式，
}来自“@react导航/抽屉”；
从“react native reanimated”导入动画；
函数提要（）{
返回(
进料筛
);
}
函数条（）{
返回(
文章筛选
);
}
函数CustomDrawerContent（{导航，进度，…rest}）{
const translateX=动画。插值（进度{
输入范围：[0，1]，
输出范围：[-100,0]，
});
常量[isshow，show]=React.useState（false）
返回(

  import  React from 'react';
import { View, Text,TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItemList,
  DrawerItem,
} from '@react-navigation/drawer';
import Animated from 'react-native-reanimated';

function Feed() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Feed Screen</Text>
    </View>
  );
}

function Article() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Article Screen</Text>
    </View>
  );
}

function CustomDrawerContent({ navigation ,progress, ...rest }) {
  const translateX = Animated.interpolate(progress, {
    inputRange: [0, 1],
    outputRange: [-100, 0],
  });
const [isshow,show] = React.useState(false)

  return (
    <DrawerContentScrollView {...rest}>
      <Animated.View style={{ transform: [{ translateX }] }}>
      <TouchableOpacity onPress={()=>{show(true)}}>
      <Text>
      press me
      </Text>
      </TouchableOpacity>
      <View>
      {isshow ? (

        <View>
          <TouchableOpacity onPress={()=>{navigation.navigate('Feed')}}>
        <Text> page one 1</Text>
</TouchableOpacity> 
    <TouchableOpacity onPress={()=>{navigation.navigate('Article')}}>
        <Text> page one 2</Text>
</TouchableOpacity> 
</View>

      ):null}
      </View>
      </Animated.View>
    </DrawerContentScrollView>
  );
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="Feed" component={Feed} />
      <Drawer.Screen name="Article" component={Article} />
    </Drawer.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}