Question

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

Answer 1

我为您提供了一个基本的示例。我希望这是您想要的：

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

Answer 2

我在此链接上找到了答案：

Tab bar can now be hidden #20

您应该做的是将import smoothscroll from 'smoothscroll-polyfill'; // enable polyfill smoothscroll.polyfill();属性与barStyle属性一起使用，如下所示：

'none'

然后，您可以使用类似于以下内容的变量来控制该属性：

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'

const BottomTab = createMaterialBottomTabNavigator()

const TabsNavigator = () => (
  <BottomTab.Navigator
    initialRouteName='Home'
    barStyle={{
      display: 'none'
    }}
  >
      // Screens
  </BottomTab.Navigator>
)

但是，要控制是否显示哪些屏幕，可以使用redux或某种方式来控制变量... barStyle={{ display: isTabVisible ? null : 'none' }} ...的状态，如以下链接所示：

material-bottom-tabsのTabを非表示する方法〜React navigation〜

是的，日语！

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

2 个答案: