Я сделал вам базовый c пример того, что вы спрашиваете. Я надеюсь, что это то, что вы ищете:
import React from 'react'
import { Button, View, Text, StyleSheet } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'
import { createStackNavigator } from '@react-navigation/stack'
const Screen1 = ({ navigation }) => (
<View style={styles.component}>
<Button title="Go to NoBottomComp" onPress={() => navigation.navigate('NoBottomComp')} />
</View>
)
const Screen2 = () => <View style={styles.component}><Text>Screen 2 component</Text></View>
const NoBottomComp = () => <View style={styles.component}><Text>Screen without bottom component</Text></View>
const Footer = createMaterialBottomTabNavigator()
const FooterNav = () => (
<Footer.Navigator>
<Footer.Screen name="Screen1" component={Screen1} />
<Footer.Screen name="Screen2" component={Screen2} />
</Footer.Navigator>
)
const Main = createStackNavigator()
export default props => (
<NavigationContainer>
<Main.Navigator>
<Main.Screen name="BottomNav" component={FooterNav} />
<Main.Screen name="NoBottomComp" component={NoBottomComp} />
{/* As many screens as you want to be without bottom tabs */}
</Main.Navigator>
</NavigationContainer>
)
const styles = StyleSheet.create({
component: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
})