react-native headerTitleStyle

Question

我正在使用 StackNavigator，并试图将“主题”一词垂直居中对齐。但是，调整填充和边距似乎没有帮助。我相信单词上方的空间是为了迎合状态栏。有没有解决的办法？ StackNavigator 代码如下。

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

我还附上了标题样式（顶部）以供参考，但我认为问题不在于它。提前致谢！

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

从...中删除 alignSelf: 'center'

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