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>

组件绿色背景的图像上所看到的，文本只是没有完美居中。即使它本身是完美对齐的...

这是世博会的小吃，将整个代码简化为必要的，并具有不同的示例大小：https://repl.it/@PaulHuchner/Centered-Text-in-Circles

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>

Answer 2

您尝试将

fontSize

和

lineHeight

设置为与圆的直径相同，其中包含

borderWidth

的

10

。

由于

borderWidth

，文本被剪切并覆盖在圆圈上。分配给剪切

lineHeight

的

Text

超出了所需，因此显示为

misaligned

。

因此，您需要根据圆的 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
   }}>

这是小吃链接

Answer 3

对我来说最有效的解决方案是不使用文本元素，而是使用加号图标。不同的是“+”作为字符的viewBox不是居中的。

如果这令人困惑，请看这三个字母
一个+一个

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

Answer 4

<Text style={{ textAlign: 'center', backgroundColor: 'green', fontSize: fontSize - 2 * borderWidth,  lineHeight: fontSize - borderWidth,  }}> Your text here </Text>

<Text style={{
     textAlign: 'center',
     backgroundColor: 'green',
     fontSize: fontSize - 2 * borderWidth, // Adjusts font size by reducing border width
     lineHeight: fontSize - borderWidth, // Adjusts line height considering border width
   }}>
   Your text here
</Text>