react-native - 如何在反应原生的嵌套堆栈导航器中隐藏材料底部选项卡导航器

Question

我正在使用材料底部选项卡导航器，我的应用程序的结构是，一些选项卡包含一个堆栈导航器。当用户导航到堆栈导航器中的另一个堆栈时，我想隐藏底部选项卡。我正在使用反应导航 v5。我不希望底部选项卡显示用户已经导航到堆栈的时间。

Answer 1

Answer 2

我为您提供了一个基本示例来说明您的要求。我希望这是你正在寻找的：

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',
    }
})