在react-navigation中从StackNavigator隐藏BottomTabNavigator的标题

Question

我正在尝试在BottomTabNavigator中隐藏标题，但此标题来自StackNavigator。 我已经尝试过使用标头：在页面内使用null和其他方法，但是没有任何效果！

const AppTabNav = createBottomTabNavigator({
  HomeScr:{
    screen:Home,navigationOptions:{tabBarLabel:'Inicio',tabBarIcon: ({tintColor}) => (<Icon name='home' color={tintColor} size={25}/>)}
  },
  Settings:{
  screen:Config,navigationOptions:{ tabBarLabel:'Configurações',tabBarIcon:({ tintColor })=>(<Icon name="settings" color={tintColor} size={25}/>)}
  }

})

const AppStackNavigator = createStackNavigator({
  AppTab:{
    screen:AppTabNav,
    navigationOptions:({navigation}) =>({
     title:'Bem vindo @USER',      
     headerLeft:(
        <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
        <View style={{paddingHorizontal:10}}>
          <Icon name="menu" color='black' size={24}/>
        </View>        
        </TouchableOpacity>)
        })
  }
},{tabBarOptions:{
  activeTintColor:'blue',
  inactiveTintColor:'black'
}})

这是当我单击底部的配置时要隐藏的标题

IMAGEM

这是Config.js文件的代码

export default class Config extends Component {
  static navigationOptions = { 
    header: null,
    drawerIcon: ({ tintColor }) => ( <Icon name='settings' style={{color:tintColor ,fontSize:24}} />)
    }
  SignOut = async() => {
    AsyncStorage.clear()
    this.props.navigation.navigate('AuthLoading')
  }

    render() {
      return (
          <Container>
          <Header>
            <Left style={{flex:1}}>
            <Icon name="menu" color='black' size={24} onPress={() => this.props.navigation.openDrawer()}/>
            </Left>
            <Body style={{flex: 1,justifyContent: 'center'}}>
              <Title>Configurações</Title>
            </Body>
            <Right style={{flex:1}}/>
          </Header>
          <View style={{flex :1, alignItems:'center', justifyContent:'center'}}>                    
                    <Text>Configurações</Text> 
                    </View> 
        </Container>
      );
  }
}

Answer 1

只需将其添加到您的组件代码中，标题将被隐藏

tabBarVisible：否

export default class Config extends Component {
  static navigationOptions = { 
    tabBarVisible: false,
    drawerIcon: ({ tintColor }) => ( <Icon name='settings' style={{color:tintColor ,fontSize:24}} />)
    }
  SignOut = async() => {
    AsyncStorage.clear()
    this.props.navigation.navigate('AuthLoading')
  }

    render() {
      return (
          <Container>
          <Header>
            <Left style={{flex:1}}>
            <Icon name="menu" color='black' size={24} onPress={() => this.props.navigation.openDrawer()}/>
            </Left>
            <Body style={{flex: 1,justifyContent: 'center'}}>
              <Title>Configurações</Title>
            </Body>
            <Right style={{flex:1}}/>
          </Header>
          <View style={{flex :1, alignItems:'center', justifyContent:'center'}}>                    
                    <Text>Configurações</Text> 
                    </View> 
        </Container>
      );
  }
}

在react-navigation中从StackNavigator隐藏BottomTabNavigator的标题

问题描述

1 个解决方案

解决方案1
0 2018-11-23 15:24:22

在react-navigation中从StackNavigator隐藏BottomTabNavigator的标题

问题描述

1 个解决方案

解决方案1 0 2018-11-23 15:24:22

解决方案1
0 2018-11-23 15:24:22