React Native：如何让文本在圆形中完美对齐

Question

我有一个在React Native中使用borderRadius制作的圆形按钮。组件中的文本应该在垂直和水平方向上都居中。

水平方向上没问题，但无论我做什么，垂直对齐似乎都会失败。即使在字体大小较小的大圆圈上看起来很好，小圆圈也证明了它是错误的！

        <View style = {{
          alignItems:'center', 
          justifyContent:'center',  
          backgroundColor:'yellow', 
          borderColor: this.props.color,    
          width:size,   height:size, 
          borderRadius:size, 
          borderWidth:borderWidth,
        }}>
            <Text style = {{
              textAlign: 'center',  
              backgroundColor:'none', 
              fontSize:fontSize, 
              lineHeight:fontSize,
            }}>
              {this.props.title}
            </Text>
        </View>

虽然已经在其他地方回答过，但我无法正确地将文本（在这种情况下）居中于圆形中。

作为一个可以看到绿色背景的<Text>组件图片中，文本并没有完美居中。即使<Text>本身是完美对齐的...

这里有一个Expo的示例代码，只包含必要的内容和不同的示例大小: https://repl.it/@PaulHuchner/Centered-Text-in-Circles

- Pauloco

Answer 1

我之前尝试了只用文本和计算行高的方法，但感觉有点过度并且对我没起作用。所以这里是我的解决方案。

我使用的是View作为容器，并设置justifyContent:center属性。

<View style={{
width: 40,
height: 40,

borderRadius: 20,
borderWidth: 1,
borderColor: 'black',
borderStyle: 'solid',

justifyContent: 'center'}}>
 <Text style={{fontSize: 20,textAlign: 'center'}}>20</Text></View>

- Tilak Puli

Answer 2

您正在尝试将fontSize和lineHeight设置为圆的直径，其中包括borderWidth为10。

由于borderWidth，文本被裁剪并覆盖在圆上。所分配给裁剪的Text的lineHeight超过了所需的值，因此显示不对齐。

因此，您需要根据圆的borderRadius来减小fontSize和lineHeight，以使其在所有尺寸下正常工作。

<Text style = {{
     textAlign: 'center',
     backgroundColor:'green',
     fontSize:fontSize - 2 * borderWidth, //... One for top and one for bottom alignment
     lineHeight:fontSize - (Platform.OS === 'ios' ? 2 * borderWidth : borderWidth), //... One for top and one for bottom alignment
   }}>

这是一个小吃品的链接。

- Pritish Vaidya

---

谢谢您的快速回复！实际上这也没有解决它 :( 我不在乎文本是否超出圆形，只要它居中就可以了。我用您的更改制作了一个小点心：https://repl.it/@PaulHuchner/Centered-Text-in-Circles-1 - Pauloco

你是在安卓上测试吗？因为我还没有看到过这个。在安卓上可能会有不同的行为。 - Pritish Vaidya

是的，而且模拟器上的小吃也是这样显示在安卓上 :( 还有其他的想法吗？看起来问题确实是<Text>组件中字体的对齐方式。 - Pauloco

你是最棒的！看起来完美。 - Pauloco

我对此过于热情了 :( 它确实更好了，但仍然不是真正的中心！如果你增加字体大小（例如120），它会更加明显。一定有一个简单/通用的解决方案，对吧？ - Pauloco

Answer 3

对我而言最好的解决方案是，不要使用文本元素，而是使用加号图标。区别在于加号字符的视口框不居中。

如果这让你感到困惑，请看看这三个字母
A+a

注意，“A”比“+”和“a”更高。因此，改用加号图标，它将完美地居中，例如24x24像素。这让我发疯了！

- Uch