Olá, estou enfrentando um probleminha com o meu header.
Gostaria que na screen Explore, o header desapareça.
Segue meu Codigo do app.js:
// Imports
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator, createAppContainer, createDrawerNavigator,createBottomTabNavigator} from 'react-navigation';
import Home from './screens/Home';
import SignIn from './screens/SignIn';
import SignIn2 from './screens/SignIn2';
import SignIn3 from './screens/SignIn3';
import SignIn4 from './screens/SignIn4';
import Explore from './screens/Explore';
import Feed from './screens/Feed';
import Profile from './screens/Profile'
import Icon from 'react-native-vector-icons/Ionicons'
export default class App extends React.Component {
render() {
return (
<AppContainer/>
);
}
}
//creating Navigators
const ExploreBottomNavigator = createBottomTabNavigator({
Explore:{
screen:Explore,
navigationOptions:{
tabBarLabel:'EXPLORE',
tabBarIcon:({tintColor})=>(
<Icon name="md-compass" color={tintColor} size={24}/>
)
}
},
Feed:{
screen:Feed,
navigationOptions:{
tabBarLabel:'FEED',
tabBarIcon:({tintColor})=>(
<Icon name="md-home" color={tintColor} size={24}/>
)
}
},
Profile:{
screen:Profile,
navigationOptions:{
tabBarLabel:'PROFILE',
tabBarIcon:({tintColor})=>(
<Icon name="md-person" color={tintColor} size={24}/>
)
}
}
},{
tabBarOptions:{
activeTintColor:'red',
inactiveTintColor:'grey',
style:{
backgroundColor:'white',
borderTopWidth:0,
borderTopRadius:10,
shadowOffset:{width:5,height:3},
shadowColor:'black',
shadowOpacity:0.5,
elevation:5
}
}
}
)
const AppStackNavigator = createStackNavigator({
Home:Home,
SignIn: SignIn,
SignIn2:SignIn2,
SignIn3:SignIn3,
SignIn4:SignIn4,
Explore: ExploreBottomNavigator
})
const AppDrawerNavigator = createDrawerNavigator({
Home:Home,
SignIn: SignIn
})
const AppContainer = createAppContainer(AppStackNavigator);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Agora o codigo da Screen Explore :
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
SafeAreaView,
TextInput,
Platform,
StatusBar
} from "react-native";
import Icon from 'react-native-vector-icons/Ionicons'
class Explore extends Component {
static navigationOptions ={
header:null
}
componentWillMount(){
this.startHeaderHeight=80
if(Platform.OS == 'android')
{
this.startHeaderHeight = 100 + StatusBar.currentHeight
}
}
render() {
return (
<SafeAreaView style={{flex:1}}>
<View style={{flex:1}}>
<View style={{height:this.startHeaderHeight,backGroundColor:'white',borderBottomWidth:1,borderBottomColor:'#dddddd'}}>
<View style={{
flexDirection: 'row', padding: 10,
backgroundColor: 'white', marginHorizontal: 20,
shadowOffset: { width: 0, height: 0 },
shadowColor: 'black',
shadowOpacity: 0.2,
elevation: 1,
marginTop: Platform.OS == 'android' ? 30 : null,
borderRadius:10
}}>
<Icon name="ios-search" size={20} style={{ marginRight: 10 }} />
<TextInput
underlineColorAndroid="transparent"
placeholder="Try New Delhi"
placeholderTextColor="grey"
style={{ flex: 1, fontWeight: '700', backgroundColor: 'white' }}
/>
</View>
</View>
</View>
</SafeAreaView>
);
}
}
export default Explore;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
Já tentei colocar headerLeft:null e tambem nao funciona....
Se alguem puder me ajudar, agradeço.