[英]react-navigation nested drawer items
I'm trying to create nested menu in react native drawer.我正在尝试在反应原生抽屉中创建嵌套菜单。 I can create the menu as below but I have to find a way to group items and put them into accordion.
我可以创建如下菜单,但我必须找到一种方法来对项目进行分组并将它们放入手风琴中。 This is how I currently create the menu:
这是我目前创建菜单的方式:
import React from 'react';
import PropTypes from 'prop-types';
import { SafeAreaView, ScrollView, StyleSheet,View } from 'react-native';
import { DrawerItems,createDrawerNavigator } from 'react-navigation';
import { Container, Content, Text, List, ListItem } from "native-base";
import {Image,ImageBackground} from "react-native";
import logo from '../images/logofullwhite200.png';
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 20
}
});
const DrawerComponent = props => {
const skippedItems = Object.keys(props.drawerItems).filter(name => props.drawerItems[name].skip);
return (
<ScrollView style={styles.container}>
<SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
<Content>
<ImageBackground
source={{
uri: "https://raw.githubusercontent.com/GeekyAnts/NativeBase-KitchenSink/master/assets/drawer-cover.png"
}}
style={{
height: 120,
alignSelf: "stretch",
justifyContent: "center",
alignItems: "center"
}}>
<Image
square
style={{ height: 50, width: 150 }}
source={logo}
/>
</ImageBackground>
<DrawerItems
{...props}
onItemPress={({ focused, route }) => {
if (!skippedItems.includes(route.routeName)) {
props.onItemPress({ focused, route });
}
}}
/>
</Content>
</SafeAreaView>
</ScrollView>
);
};
DrawerComponent.propTypes = {
onItemPress: PropTypes.func,
drawerItems: PropTypes.object
};
export default DrawerComponent;
this is the data example这是数据示例
"CreateSale": Object {
"navigationOptions": Object {
"drawerLabel": Object {
"$$typeof": Symbol(react.element),
"_owner": null,
"_store": Object {},
"key": null,
"props": Object {
"i18nKey": "sale.create_sale",
},
"ref": null,
"type": [Function I18nextWithTranslation],
},
},
"screen": [Function KeyboardAwareNavigator],
"userInfo": Object {
"showOnLogin": true,
},
},
"Customer": Object {
"navigationOptions": Object {
"drawerLabel": Object {
"$$typeof": Symbol(react.element),
"_owner": null,
"_store": Object {},
"key": null,
"props": Object {
"i18nKey": "list.title",
},
"ref": null,
"type": [Function I18nextWithTranslation],
},
},
"screen": [Function KeyboardAwareNavigator],
"userInfo": Object {
"showOnLogin": true,
},
}
This is how index.tsx looks这就是 index.tsx 的样子
export default new ClientModule({
router: <MainScreenNavigator />,
onAppCreate: [
async (modules: ClientModule) =>
(ref.navigator = createDrawerNavigator(
{
...modules.drawerItems
},
{
// eslint-disable-next-line
contentComponent: props => <DrawerComponent {...props} drawerItems={modules.drawerItems} />
}
))
]
});
I have to put the items in to accordion, they have to look nested such as as below:我必须将项目放入手风琴中,它们必须看起来像嵌套,如下所示:
Outlets奥特莱斯
no need to make nested drawer.无需制作嵌套抽屉。 you can use react-native-collapsible and make custom drawerItem like accordion
您可以使用react-native-collapsible并制作像手风琴一样的自定义抽屉项
yarn add react-native-collapsible
import Collapsible from 'react-native-collapsible';
() => (
<Collapsible collapsed={isCollapsed}>
<SomeCollapsedView />
</Collapsible>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.