React Native：完美对齐圆圈中的文本

Question

我borderRadius在 React Native 中有一个圆形按钮（用 制作）。组件中的文本应垂直和水平居中。

Horyzontally 很好，但无论我做什么，垂直对齐似乎都失败了。即使它在小字体的大圆圈上看起来不错，小圆圈也证明它是错误的！

        <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>-Component绿色背景的图像上看到的那样，文本只是没有完美居中。即使它本身是完全对齐的......

这是世博会的小吃，整个代码减少到必要和不同的示例大小：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
   }}>

这是小吃链接