Как в React Native создать двойную навигацию (сверху и снизу)?

По видеоуроку получилось создать двойную навигацию, но верхняя была встроена в нижнюю. Получается, нижняя навигация была основной и была на всех экранах приложения. Я же хочу, чтобы верхняя навигация была во всём приложении, а нижняя только на главном экране. Как можно этого добиться?

Файл App

import React from 'react'

import { ProclaState } from './src/context/procla/ProclaState'
import { ScreenState } from './src/context/screen/ScreenState'
import { MainLayout } from './src/MainLayout'
import { AppNavigation } from './src/navigation/AppNavigation'
import { BottomNavigationMain } from './src/navigation/BottomNavigationMain'

export default function App() {
    return <AppNavigation />
}

Файл AppNavigation

import React from 'react'

import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import { createBottomTabNavigator } from 'react-navigation-tabs'
import { Ionicons } from '@expo/vector-icons'
import { MainScreen } from '../screens/MainScreen'
import { ProclaScreen } from '../screens/ProclaScreen'
import { ChosenScreen } from '../screens/ChosenScreen'

const ProclaNavigator = createStackNavigator(
    {
        Main: MainScreen,
        Procla: ProclaScreen
    }
)

const ChosenNavigator = createStackNavigator(
    {
        Chosen: ChosenScreen,
        Procla: ProclaScreen
    }
)

const BottomNavigator = createBottomTabNavigator(
    {
        MainScreen: {
            screen: ProclaNavigator,
            navigationOptions: {
                tabBarLabel: 'All',
                tabBarIcon: info => (
                    <Ionicons name='ios-albums' size={25} color={info.tintColor} />
                )
            }
        },
        Chosen: {
            screen: ChosenNavigator,
            navigationOptions: {
                tabBarLabel: 'Chosen',
                tabBarIcon: info => (
                    <Ionicons name='ios-star' size={25} color={info.tintColor} />
                )
            }
        }
    },
    {
        tabBarOptions: {
            activeTintColor: '#42aaff'
        }
    }
)

export const AppNavigation = createAppContainer(BottomNavigator)

Ну и MainScreen

import React, { useContext, useEffect, useCallback } from 'react'
import { View, Text, FlatList, Image, StyleSheet } from 'react-native'

import { ProclaContext } from '../context/procla/proclaContext'
import { ScreenContext } from '../context/screen/screenContext'
import { Proclalend } from '../components/Proclalend'
import { AppLoader } from '../components/ui/AppLoader'
import { AppButton } from '../components/ui/AppButton'
import { HeaderButtons, Item } from 'react-navigation-header-buttons'
import { AppHeaderIcon } from '../components/AppHeaderIcon'

import { DATA } from '../../Data'

export const MainScreen = ({ navigation }) => {
    const openProcla = procla => {
        navigation.navigate('Procla', {proclaId: procla.id, title: procla.text, chosen: procla.chosen})
    }

    return (
        <View>
            <FlatList
                data={DATA}
                keyExtractor={item => item.id.toString()}
                renderItem={({ item }) => (
                    <Proclalend procla={item} onOpen={openProcla} />
                )}
                numColumns={2}
            />
        </View>
    )
}

MainScreen.navigationOptions = {
    headerTitle: "News",
    headerLeft: (
        <HeaderButtons HeaderButtonComponent={AppHeaderIcon}>
            <Item
                title='Toggle Drawer'
                iconName='ios-menu'
                onPress={() => console.log('Drawer')}
            />
        </HeaderButtons>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    imgWrap: {
        width: '65%',
        height: '65%'
    },
    image: {
        width: '100%',
        height: '100%',
        resizeMode: 'contain'
    },
    errorWrapper: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    error: {
        fontSize: 20,
        color: 'red'
    }
})

Остальные экраны по аналогии. Потратил целый рабочий день, без результата. Наверняка решение очень простое, если знать как делать. Единственное что я понял, так это то, что нельзя создавать две навигации через createAppContainer, как тогда быть? Вложение нижнего меню в верхнее реализовать не получилось.


Ответы (0 шт):