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

时间:2018-11-23 15:10:32

标签: javascript react-native react-native-android react-navigation

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

// Startup.cs
services.Configure<Options>(Configuration, c => c.BindNonPublicProperties = true);

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

Imagem

这是Config.js文件的代码

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'
}})

1 个答案:

答案 0 :(得分:0)

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

tabBarVisible:false

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>
      );
  }
}