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

Posted 2023-02-22

【中文标题】按钮文本在本机反应中未垂直居中对齐

【英文标题】：Button text not aligned center vertically in react native

【发布时间】：2019-09-28 00:50:12

【问题描述】：

我面临一个问题，将按钮的文本垂直居中对齐，但它仍然略低于正中。 我从文档中找到了includeFontPadding，它暗示了某些第三方字体存在一些差异。

字体在 ios 设备中看起来很合适，但在 android 设备中不正确。

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

设置为 false 以删除旨在为某些上升/下降腾出空间的额外字体填充。对于某些字体，此填充可能会使文本在垂直居中时看起来略微错位。为了获得最佳结果，还将 textAlignVertical 设置为居中。默认为真。

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

按钮样式：

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

【问题讨论】：

请同时添加使用的样式。

@Tim 样式添加

你使用的是标准的 react-native 按钮吗？

@Tim：是的，我使用的是标准按钮

抱歉再次提问，能否提供MCVE？我认为否则没有人可以帮助你

【参考方案1】：

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

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

所以你的代码将是

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

【讨论】：

能否请您发布带有输出的屏幕？

【参考方案2】：

试试这个：

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

【参考方案3】：

如果您使用的是 react native 默认按钮，则 react native 默认按钮不支持样式属性，并且不支持在 Button 组件中使用 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,
  ,

【参考方案4】：

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

为了获得最佳效果，还将 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
  

【参考方案5】：

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

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

也许这可以帮助你参考