reagieren native StackNavigation Header

Question

Ich habe ein kleines Problem mit der Kopfzeile mit dem StackNavigator in react-native konfrontiert.

Ich habe zwei Ansichten, zwischen denen ich navigiere, Skatebay und Profile. Wenn ich den StackNavigator verwende, fügt er der Skatebay-Ansicht einen Top-Bar "Header" hinzu. Wie kann ich ihn entfernen, wenn es nicht möglich ist? Kann ich ihn so aussehen, dass er wie der Header aussieht, den ich bereits erstellt habe?

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TouchableHighlight, 
    Image, 
    ScrollView, 
    Button, 
} from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 
import s from './styles/main.js'; 

class skatebay extends React.Component{ 

    render(){ 
    const { navigate } = this.props.navigation; 
    return (

    <View style={s.container}> 

     <View style={s.toolbar}> 
     <TouchableHighlight style={s.toolbarButton} onPress={() => navigate('Profile')} 
      title="Profile"> 
      <Image style={s.toolIcon} source={require('./gfx/profile.png')}/> 
     </TouchableHighlight> 

     <TouchableHighlight style={s.toolbarTitle} onPress={alert}> 
      <Image style={s.logo} source={require('./gfx/logos.png')}/> 
     </TouchableHighlight> 

     <TouchableHighlight style={s.toolbarButton} onPress={alert}> 
      <Image style={s.toolIcon} source={require('./gfx/settings.png')}/> 
     </TouchableHighlight> 
     </View> 

     </View> 
    ); 
    } 
} 

Profilansicht

class ProfileScreen extends React.Component { 
    static navigationOptions = { 
     title: 'Profile', 
    }; 
render() { 
    return (
     <View> 
     <Text>profile</Text> 
     </View> 
    ); 
    } 
} 


const skatebayApp = StackNavigator({ 
    Main: {screen: skatebay}, 
    Profile: {screen: ProfileScreen} 
}); 

AppRegistry.registerComponent('skatebayApp',() => skatebayApp); 

Ich spreche über das blau/grau-Header über dem weißen Kopf i erstellt haben.

Answer 1

Wenn Sie den Standard-Header von StackNavigator nicht wollen, können Sie keine passieren https://reactnavigation.org/docs/navigators/stack#StackNavigatorConfig StackNavigatorConfig

const skatebayApp = StackNavigator({ 
    Main: {screen: skatebay}, 
    Profile: {screen: ProfileScreen} 
}, { 
    headerMode: 'none' 
});