[英]How do I hide material bottom tab navigator in a nested stack navigator in react native
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.我正在使用反应导航 v5。 I don't want the bottom tabs showing when a user has already navigated to a stack.我不希望底部选项卡显示用户已经导航到堆栈的时间。
I found the answer at this link:我在这个链接找到了答案:
Tab bar can now be hidden #20 现在可以隐藏标签栏 #20
What you should do is use the barStyle
attribute with the 'none'
property, which would look like this:您应该做的是使用带有'none'
属性的barStyle
属性,如下所示:
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'
const BottomTab = createMaterialBottomTabNavigator()
const TabsNavigator = () => (
<BottomTab.Navigator
initialRouteName='Home'
barStyle={{
display: 'none'
}}
>
// Screens
</BottomTab.Navigator>
)
Then you can control that property with a variable, something similar to this:然后您可以使用变量控制该属性,类似于以下内容:
...
barStyle={{
display: isTabVisible ? null : 'none'
}}
...
However, to control which screens are displayed or not, you can use redux or some way to control the state of the variable isTabVisible
as shown in the following link:但是,要控制显示或不显示哪些屏幕,您可以使用 redux 或某种方式来控制变量isTabVisible
的 state,如以下链接所示:
material-bottom-tabsのTabを非表示する方法〜React navigation〜 material-bottom-tabsのTabを非表示する方法〜反应导航〜
Yeap it's in japanese是的 是日文
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',
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.