我如何在React Native中的嵌套堆栈导航器中隐藏材质底部选项卡导航器

问题描述

我使用的是底部标签导航器"，我的应用程序的结构使得某些标签包含堆栈导航器. 当用户导航到堆栈导航器中的另一个堆栈时，我想隐藏底部的选项卡.我正在使用React Navigation v5.我不希望在用户已经导航到堆栈时显示底部选项卡.

I'm using material Bottom Tab Navigator, My app is structured such that, some tabs contain a stack navigator. I want to hide the bottom tabs when a user navigates to another stack in the stack navigator.I'm using react navigation v5.I don't want the bottom tabs showing when a user has already navigated to a stack.

推荐答案

我为您提供了一个基本的示例.我希望这是您要寻找的东西:

I made you a basic example of what you're asking. I hope this what you're looking for :

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

这篇关于我如何在React Native中的嵌套堆栈导航器中隐藏材质底部选项卡导航器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！