如何解决是否可以使用带有子页面的 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>
);
}
展会链接
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。