Question

我正在尝试在React本机抽屉中创建嵌套菜单。我可以如下创建菜单，但是我必须找到一种将项目分组并将其放入手风琴的方法。这是我当前创建菜单的方式：

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;

这是数据示例

"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,
    },
  }

这是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} />
        }
      ))
  ]
});

我必须将这些物品放入手风琴中，它们看起来必须像下面这样嵌套：

奥特莱斯

客户
客户

Answer 1

无需制作嵌套抽屉。您可以使用react-native-collapsible并制作类似手风琴的自定义抽屉项

yarn add react-native-collapsible

import Collapsible from 'react-native-collapsible';

() => (
  <Collapsible collapsed={isCollapsed}>
    <SomeCollapsedView />
  </Collapsible>
);

反应导航嵌套抽屉项目

1 个答案: