Создать меню в React Native с помощью StackNavigator с получением данных из API

Question

Я новичок в реакции на родную и делаю меню для электронной коммерции. На сервере есть меню с разной глубиной вложенности. Например:

Список основных категорий

[
    {
        "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
            }
    },
    ...
]

Например, вы можете видеть, что категории имеют различную структуру, например parent_category-> product_list или parent_category-> level_1-> level_2-> level_3-> level_4-> product_list.

Вопрос: Я не могу создать переход между страницами после извлечения данных меню из parent_category в продукт. Как создать гибкое меню в зависимости от глубины вложения? Я думаю, что нужно две страницы Категория. js и Продукт. js. В Category. js передается значение category_id и в Product. js value product_id. Или мне нужно создать страницу для каждой категории лично? Не могли бы вы помочь мне?

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 category = this.state.dataSource.map((val, key) => {
        return (
          <List key={key}>
            <ListItem>
              <TouchableOpacity
              onPress={() => {
                ???;
              }}
              >
                <Text>{val.name}</Text>
              </TouchableOpacity>
            </ListItem>
          </List>
        );
      });

      return (
        <ScrollView>

          {category}
         </ScrollView>
      );
    }

  }
}