Детский пункт меню, использующий данные FlatList и JSON в реагирующем - PullRequest
Новая
       11

Детский пункт меню, использующий данные FlatList и JSON в реагирующем

0 голосов
/ 12 февраля 2019

Я новичок в реакции-родной и создаю левое меню навигации.У меня есть данные 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} />}
                    />

Итак, в соответствии с родителями, мне нужно добавить эти элементы в качестве дочерних элементов этого меню.В настоящее время в соответствии с приведенным выше кодом, я могу получить все пункты меню в обычном режиме (главное меню).Как я могу изменить свой метод рендеринга, чтобы дочерние элементы меню могли быть добавлены в пункт меню, и при щелчке по родительскому элементу я могу открыть дочернее меню)?

...