按钮文本在本机中未垂直居中对齐

Question

我面临的一个问题是将按钮的文本垂直居中对齐，但是它仍然比精确居中位置略低。我includeFontPadding从文档中发现了一些与第三方字体的差异。

字体在iOS设备上看起来合适，但在Android中居中。

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

设置为false可删除多余的字体填充，这些字体填充旨在为某些升序/降序留出空间。对于某些字体，这种填充可以使文本在垂直居中时看起来稍微不对齐。为了获得最佳结果，还将textAlignVertical设置为居中。默认为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

而不是在按钮组件中使用文本组件。使用按钮文档中定义的道具“标题”：

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

所以你的代码将是

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

Answer 2

尝试一下：

<Button style={{display: 'flex', justifyContent: 'center'}}>
   <Text>Setup Now</Text>
</Button>