1
resposta

Stack navigator - Header

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.

1 resposta

Oi parismollochristondis, tudo bem? Algum progresso? Não sou nenhum especialista React Native, mas pensando só no React mesmo, não seria o caso de passar uma prop que define em que tab você está no momento e a própria screen verificar e dar um display: none no style do header dela mesma?

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software