Reaction-native: Как скрыть нижнюю вкладку на прессе

Question

Я пытаюсь hide bottomTabbar при нажатии на кнопку.

В моем файле App.js есть мой ButtomTabNavigator:

const ButtomTabNavigator = createBottomTabNavigator(
  {
    screenOne: {
      screen: RealReviewMain,
      navigationOptions: ({ navigation }) => ({
        tabBarVisible: true,
      })
    },
    screenTwo: {
      screen: RealReviewMain,
//Here I set the tabbarVisible to true
      navigationOptions: ({ navigation }) => ({
        tabBarVisible: true,
      })
    },
  },
)

Из ScreenTwo я пытаюсь hide bottom tabbar, используя onPress

<TouchableOpacity
          onPress={()=> {
            this.props.navigation.setParams({ tabBarVisible: false });
          }}/>

Это правильный способ сделать это? ничего не происходит.

Буду очень признателен за любой совет или комментарий! Заранее спасибо!

Answer 1

Можно скрывать / показывать панель таба на основе нажатия кнопки. Использование static navigationOptions. Примером может быть:

 static navigationOptions = ({ navigation }) => {
    return {tabBarVisible: navigation.state.params.tabBarVisible}
}

Это простой пример, вам нужно будет инициализировать tabBarVisible, поскольку он будет ложным. Полный компонент может выглядеть так:

import React, { Component } from 'react'
import { Text, View, Button } from 'react-native'

class Screen extends Component {

    componentDidMount = () => {
        this.props.navigation.setParams({ tabBarVisible: true }) //initialize the state
    }

    static navigationOptions = ({ navigation }) => {

        return {tabBarVisible:navigation.state.params && navigation.state.params.tabBarVisible}
    }
    render() {
        return (
            <View style={{flex:1}}>           
                <Button title={"hide"} onPress={() => this.props.navigation.setParams({tabBarVisible:false})}/>
                <Button title={"show"} onPress={() => this.props.navigation.setParams({tabBarVisible:true})}/>
            </View>
        )
    }
}


export default Screen

Answer 2

Насколько я знаю, вы не можете скрыть элементы навигации, как только они отображаются на странице. Но, как указано здесь , вы можете скрыть элементы навигации на определенных экранах следующим образом:

const FeedStack = createStackNavigator({
    FeedHome: FeedScreen,
    Details: DetailsScreen,
});

FeedStack.navigationOptions = ({ navigation }) => {
    let tabBarVisible = true;
    if (navigation.state.index > 0) {
        tabBarVisible = false;
    }

    return {
        tabBarVisible,
    };
};

Если вы хотите скрыть навигатор на определенном экране, вы можете добавить условие if:

if (navigation.state.index > 0 && navigation.state.routes[1].routeName === "<name of the screen>")