是否可以使用带有子页面的 react-navigation-drawer？

问题描述

我正在使用 react-native 和 react-navigation-drawer 来生成用于导航 beetwen 屏幕的侧边菜单。 我的问题是：是否存在将子页面放在侧边菜单中的方法或指南？
欢迎任何建议，并提前感谢您 左边是我的菜单，右边是我想要的：

解决方法

您可以使用它进行自定义

自定义抽屉内容

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

文档

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 (
    <View style={{ flex: 1,justifyContent: 'center',alignItems: 'center' }}>
      <Text>Feed Screen</Text>
    </View>
  );
}

function Article() {
  return (
    <View style={{ flex: 1,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>
  );
}

展会链接

https://snack.expo.io/cXuBvzs87