I am new in react native and doing the menu for ecommerce. There is menu with different nesting depth on server. For example:
Main Category List
[ {"category_id": xxx, "name": "parent_1", //level_1 child {"category_id": xxx, "name": "xxx","parent_id": xxx //level_2 child {"category_id": xxx, "name": "xxx","parent_id": xxx //level_3 child {"category_id": xxx, "name": "xxx","parent_id": xxx //level_4 child {"category_id": xxx, "name": "xxx","parent_id": xxx //product_list product{"category_id": xxx, "name": "xxx","description": xxx } } } } } }, {"category_id": xxx, "name": "parent_2", //level_1 child {"category_id": xxx, "name": "xxx","parent_id": xxx //level_2 child {"category_id": xxx, "name": "xxx","parent_id": xxx //product_list product{"category_id": xxx, "name": "xxx","description": xxx } } } }, {"category_id": xxx,"name": "parent_3", child {"category_id": xxx, "name": "xxx","parent_id": xxx //level_2 child {"category_id": xxx, "name": "xxx","parent_id": xxx //level_3 child {"category_id": xxx, "name": "xxx","parent_id": xxx //product_list product{"category_id": xxx, "name": "xxx","description": xxx } } } } }, {"category_id": xxx,"name": "parent_4", //product_list product{"category_id": xxx, "name": "xxx","description": xxx } }, ...]
In example you can see that categories has vary structure such as parent_category->product_list or parent_category->level_1->level_2->level_3->level_4->product_list.
Question: I cannot create transition between pages after fetching menu data from parent_category to product. How to create flexible menu depending from nesting depth? I think it need two pages Category.js and Product.js. In to the Category.js passed value of category_id and to Product.js value of product_id. Or i need to create page for every category personally?Could you help me?
Main.js
import * as React from 'react';import { Text, View } from 'react-native';import { Icon } from 'native-base';import { NavigationContainer } from '@react-navigation/native';import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';import Home from './page/Home'import Category from './page/Category'import Cart from './page/Cart'function ProfileScreen() { return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>Профиль!</Text></View> );}const Tab = createMaterialBottomTabNavigator();export default function Main() { return (<NavigationContainer><Tab.Navigator // initialRouteName="Home" // activeColor="#f0edf6" // inactiveColor="#fff" screenOptions={({ route }) => ({ tabBarIcon: ({ focused, color, size }) => { let iconName; if (route.name === 'Главная') { iconName = focused ? 'ios-home' : 'ios-home'; } else if (route.name === 'Каталог') { iconName = focused ? 'ios-list' : 'ios-list'; } else if (route.name === 'Корзина') { iconName = focused ? 'ios-cart' : 'ios-cart'; } else if (route.name === 'Профиль') { iconName = focused ? 'ios-person' : 'ios-person'; } // You can return any component that you like here! return <Icon name={iconName} size={100} color="#F79A3D" />; }, })} barStyle={{ backgroundColor: '#fff' }}><Tab.Screen name="Главная" component={Home} /><Tab.Screen name="Каталог" component={Category} /><Tab.Screen name="Корзина" component={Cart} /><Tab.Screen name="Профиль" component={ProfileScreen} /></Tab.Navigator></NavigationContainer> );}
src/Category.js
import React from 'react';import { StyleSheet, Text, FlatList, ActivityIndicator, View, TouchableOpacity,ScrollView} from 'react-native';import { SearchBar, Avatar } from "react-native-elements";import { Container, Content, List, ListItem, Button, Icon } from 'native-base';import { createStackNavigator } from '@react-navigation/stack';import {NavigationContainer} from '@react-navigation/native';const Stack = createStackNavigator();export default class Category extends React.Component { constructor(props) { super(props); this.state = { isLoading: true, dataSource: null, } } componentDidMount() { return fetch('http://app.site.ru/catalog') //How to pass this value of category_id? .then (( response ) => response.json()) .then (( responseJson ) =>{ this.setState({ isLoading: false, dataSource: responseJson, }) }) .catch((error) => { console.log(error) }); } render() { if (this.state.isLoading) { return (<View styles={[styles.container]}><ActivityIndicator size="large" /></View> ) } else { let catalog = this.state.dataSource.map((val, key) => { return (<List key={key}><ListItem><TouchableOpacity onPress={() => { ???; }}><Text>{val.name}</Text></TouchableOpacity></ListItem></List> ); }); return (<ScrollView> {catalog}</ScrollView> ); } }}
