如何在本机上垂直对齐中心导航选项？

Question

这是我的代码：

Welcome.navigationOptions = {
  headerTitle: <Text style={theme.fonts.header}>Welcome</Text>,
  headerTitleStyle: {
    alignSelf: "center",
    textAlignVertical: "center"
  },
  headerRight: (
    <TouchableOpacity style={{ alignSelf: "center" }}>
      <Block flex={false}>
        <Image
          resizeMode="contain"
          source={require("../../assets/images/Icon/Menu.png")}
          style={{ width: 20, height: 24 }}
        />
        <Badge
          size={13}
          color={theme.colors.accent}
          style={{ position: "absolute", top: -4, right: -4 }}
        />
      </Block>
    </TouchableOpacity>
  )
};

[您看到我已经使用textVerticalAlign和alignSelf将headerTitleStyle居中并使用alignSelfheaderRight的中心，仍然没有效果，这是代码的结果，就像您将代码对齐在底部一样：

我也尝试过此方法仍然不起作用：

headerStyle: { 
  alignItems: 'center'
}

Answer 1

将[flex：1]赋予标题标题样式