Как скрыть навигатор нижней вкладки материала во вложенном навигаторе стека в React Native

Я использую материал Bottom Tab Navigator. Мое приложение структурировано таким образом, что некоторые вкладки содержат навигатор стека. Я хочу скрыть нижние вкладки, когда пользователь переходит к другому стеку в навигаторе стека. Я использую React Navigation v5. Я не хочу, чтобы нижние вкладки отображались, когда пользователь уже перешел к стеку.


react-native react-navigation react-navigation-bottom-tab react-navigation-v5 react-navigation-stack
person Similoluwa Odeyemi    schedule 12.04.2020    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я нашел ответ по этой ссылке:

Панель вкладок теперь можно скрыть # 20

Что вам следует сделать, так это использовать атрибут 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>
)

Затем вы можете управлять этим свойством с помощью переменной, примерно так:

...
  barStyle={{
    display: isTabVisible ? null : 'none'
  }}
...

Однако, чтобы контролировать, какие экраны отображаются или нет, вы можете использовать сокращение или какой-либо способ управления состоянием переменной isTabVisible, как показано в следующей ссылке:

материал-дно -tabs の Tab を 非 表示 す る 方法 〜React navigation〜

Да, это на японском

person Jael Armas M    schedule 26.05.2020
comment
работает как шарм с Redux - person Zeeshan Ahmad Khalil; 25.05.2021

arrow_upward
1
arrow_downward

Я сделал вам простой пример того, о чем вы спрашиваете. Надеюсь, это то, что вы ищете:

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',
    }
})
person CevaComic    schedule 21.04.2020