Question

我是本机和创建左侧导航菜单的新手。我有json数据（数组），根据该数据，我需要创建左菜单项和子菜单。下面是示例代码-

categories = [
            { id: 0, display: "default", menu_order: 0, name: "Dashboard", parent: 0, screen: 'Dashboard' },
            { id: 1, display: "default", menu_order: 0, name: "Products", parent: 0, screen: 'Products', slug: "computers-and-laptops" },
            { id: 2, display: "default", menu_order: 1, name: "Orders", parent: 0, screen: 'MyOrders', slug: "computers-and-laptops" },
            { id: 3, display: "default", menu_order: 2, name: "Coupons", parent: 0, screen: 'Coupons', slug: "computers-and-laptops" },
            { id: 4, display: "default", menu_order: 3, name: "Reports", parent: 0, screen: 'Report', slug: "computers-and-laptops" },
            { id: 5, display: "default", menu_order: 4, name: "Reviews", parent: 0, slug: "computers-and-laptops" },
            { id: 6, display: "default", menu_order: 5, name: "Withdraw", parent: 0, slug: "computers-and-laptops" },
            { id: 7, display: "default", menu_order: 6, name: "Settings", parent: 0, slug: "computers-and-laptops" },
            { id: 8, display: "default", menu_order: 7, name: "Store", parent: 6, screen: 'Store', slug: "computers-and-laptops" },
            { id: 9, display: "default", menu_order: 8, name: "Payment", parent: 6, screen: 'PaymentSetting', slug: "computers-and-laptops" },
            { id: 10, display: "default", menu_order: 9, name: "Verification", parent: 6, screen: 'Verification', slug: "computers-and-laptops" },
            { id: 11, display: "default", menu_order: 10, name: "Shipping", parent: 6, screen: 'ShippingSetting', slug: "computers-and-laptops" },
            { id: 11, display: "default", menu_order: 11, name: "Social Profile", parent: 6, screen: 'SocialProfile', slug: "computers-and-laptops" },
            { id: 12, display: "default", menu_order: 12, name: "Store SEO", parent: 6, screen: 'StoreSeo', slug: "computers-and-laptops" },
            { id: 13, display: "default", menu_order: 12, name: "Edit Account Details", parent: 6, screen: 'EditAccount', slug: "computers-and-laptops" }
        ]

以下是渲染功能-

<FlatList
                        contentContainerStyle={styles.list}
                        keyExtractor={(item, index) => `${item.id}`}
                        data={categories}
                        renderItem={({ item, index }) => {
                            return <LeftMenuItem item={item} onPress={onOpenPage} />
                        }}
                        ItemSeparatorComponent={() => <View style={styles.separator} />}
                    />

因此，根据父项，我需要将这些项目添加为该菜单的子项。目前根据上面的代码，我能够正常获取所有菜单项（主菜单）。如何更改渲染方法，以便可以将子菜单项添加到菜单项中，并且在单击父项时可以打开子菜单）？

子菜单项在react-native中使用FlatList和JSON数据

0 个答案: