react-native：如何隐藏底部标签栏 onPress答案

【问题标题】：react-native: How to hide bottom tabbar onPressreact-native：如何隐藏底部标签栏 onPress
【发布时间】：2019-10-28 10:05:56
【问题描述】：

当我按下按钮时，我正在尝试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 中，我尝试使用 onPresshide bottom tabbar

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

这是正确的做法吗？什么都没有发生。

任何建议或评论将不胜感激！提前致谢！

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案1】：

可以隐藏/显示基于关闭按钮按下的 tabBar。使用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

【讨论】：

【解决方案2】：

据我所知，一旦导航元素在页面中呈现，您就无法隐藏它们。但是，正如here 所述，您可以在特定屏幕中隐藏导航元素，如下所示：

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>")

【讨论】：