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

可以通过关闭按钮来隐藏/显示tabBar。使用static navigationOptions。一个例子是：

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

这是一个简单的示例，您将需要初始化tabBarVisible，因为它会为false。完整的组件可能看起来像：

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

据我所知，一旦导航元素在页面中呈现，您将无法隐藏它们。但是，如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>")

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

2 个答案: