是否可以使用带有子页面的反应-导航-抽屉？

Question

我正在使用react-native和react-navigation-drawer为导航beetwen屏幕生成一个侧边菜单。我的问题是:是否有一种方法或指南可以将子页面放在侧边菜单中？

欢迎任何建议，并预先感谢您在左侧如何显示我的菜单和右侧是我想要的：

​

​

Answer 1

您可以使用以下命令对其进行自定义

CustomDrawerContent

它有很多选择，请阅读它，并不是所有的项目都需要定制，我只是为你快速地做了这个例子

文档

https://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent

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 (
    
      Feed Screen
    
  );
}

function Article() {
  return (
    
      Article Screen
    
  );
}

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

  return (
    
      
      {show(true)}}>
      
      press me
      
      
      
      {isshow ? (

        
          {navigation.navigate('Feed')}}>
         page one 1
 
    {navigation.navigate('Article')}}>
         page one 2
 


      ):null}
      
      
    
  );
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
     }>
      
      
    
  );
}

export default function App() {
  return (
    
      
    
  );
}

世博会链接

https://snack.expo.io/cXuBvzs87