react-native headerTitleStyle

Question

Ich benutze den StackNavigator und habe versucht, das Wort 'topic' so auszurichten, dass es vertikal zentriert wird. Das Anpassen von Padding und Rand scheint jedoch nicht zu helfen. Ich glaube, dass der Raum über dem Wort auf die Statusleiste ausgerichtet ist. Gibt es einen Weg dahin? Der StackNavigator-Code ist unten.

See image

export const MyAppStack = StackNavigator({ 
    Topic: { 
    screen: TopicScreen, 
    navigationOptions: { 
     title: 'Topic', 
     headerStyle: { 
     backgroundColor: 'grey', 
     elevation: null, 
     paddingTop: 0, 
     height: 10, 
     marginTop: 0 }, 
     headerTitleStyle: { 
     paddingTop: 0, 
     alignSelf: 'center', 
     justifyContent: 'center' 
     } 
    }, 
    }, 
    FlashCard: { 
    screen: FlashCardScreen, 
    navigationOptions: { 
     title: 'Flashcards', 
     headerBackTitleStyle: { 
     fontSize: 100, 
     alignSelf: 'center' 
     } 
    }, 
    }, 
}); 

ich auch den Header-Stil (der obere Teil) als Referenz bin Befestigung, aber ich glaube nicht, die Probleme liegen damit. Danke im Voraus!

const Header = (props) => { 
    const { textStyle, viewStyle } = styles; 

    return (
    <View style={viewStyle}> 
     <Text style={textStyle}>{props.headerText}</Text> 
    </View> 
); 
}; 

const styles = { 
    viewStyle: { 
    backgroundColor: '#ff8a00', 
    justifyContent: 'center', 
    alignItems: 'center', 
    height: 60, 
    paddingTop: 15, 
    shadowColor: '#000', 
    shadowOffset: { width: 0, height: 2 }, 
    shadowOpacity: 0.2, 
    elevation: 2, 
    position: 'relative' 
    }, 
    textStyle: { 
    fontSize: 20 
    } 
}; 

Answer 1

entfernen alignSelf: 'Zentrum' von ...

headerTitleStyle: { paddingTop: 0, alignSelf: 'center', justifyContent: 'center' }