是否可能带有子页面的反应导航抽屉？

Posted 2023-03-22

【中文标题】是否可能带有子页面的反应导航抽屉？

【英文标题】：Is possible react-navigation-drawer with subpages?

【发布时间】：2021-03-01 10:39:09

【问题描述】：

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

【参考方案1】：

您可以使用自定义它

自定义抽屉内容

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

文档

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, 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>
  );

展览链接

https://snack.expo.io/cXuBvzs87