android - 在 native react 中，按钮文本未垂直居中对齐

Question

我遇到了一个问题，将按钮的文本垂直居中对齐，但它仍然略低于准确居中的位置。我从文档中找到了 includeFontPadding，其中提示与某些第三方字体存在一些差异。

字体在 iOS 设备上看起来不错，但在 Android 设备上没有正确居中。

https://facebook.github.io/react-native/docs/text-style-props#includefontpadding

Set to false to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. For best results also set textAlignVertical to center. Default is true.

<Button
    style={[style.button]} block >
     <Text>Setup Now</Text>
  </Button>

按钮样式:

export default {
  button: {
    elevation: null,
    shadowColor: null,
    shadowOffset: null,
    shadowOpacity: null,
    shadowRadius: null
  }
}

Answer 1

而不是在按钮组件中使用文本组件。使用按钮文档中定义的 Prop “title”:

https://facebook.github.io/react-native/docs/button.html

所以你的代码将是

<Button
    style={[style.button]} title="Setup Now" block >
  </Button>