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

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

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

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

所以你可能会

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

Answer 2

如果您使用的是react native默认按钮，则react native默认按钮不支持样式属性，而且不支持在Button Component中使用Text组件。使用官方文档中定义的“标题”属性，请参阅以下链接

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

React Native还为您的自定义按钮提供了各种按钮选项，请根据下面的用途

https://facebook.github.io/react-native/docs/handling-touches

请尝试以下解决方案，可能会帮助您解决问题。

<TouchableOpacity
      activeOpacity={.5}
      style={styles.buttonStyle}>
      <Text style={styles.textStyle}>Setup Now</Text>
</TouchableOpacity>



buttonStyle: {
    padding: 14,
    backgroundColor: 'red',
    borderRadius: 6,
  },

  textStyle: {
    color: 'white',
    textAlign: 'center',
    fontWeight: 'bold',
    fontSize: 16,
  },

Answer 3

尝试一下：

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

Answer 4

或者您可以在文本中添加样式，例如<Text style={styles.example}>TEST</Text>，然后添加到样式中

const styles = StyleSheet.create({ example: { text-align:'center', } })

也许这可以为您提供参考

Answer 5

您可以尝试在文本中添加一些样式。实际上，您在文档中引用的那段剪裁中直接提到了它：

  

为获得最佳结果，还将textAlignVertical设置为居中。

<Text style={[style.text]}>Setup now</Text>

具有以下样式：

export default {
  button: {
    ...
  },
  text: {
    flex: 1,   // fill the button
    textAlign: 'center',
    textAlignVertical: 'center',  // this style is Android only
  }
}