Как в 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, как тогда быть? Вложение нижнего меню в верхнее реализовать не получилось.