react-native - react native : Perfectly align Text in circle

Question

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

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>

虽然已经回答 elsewhere ，我无法正确地将文本(在这种情况下)居中。



正如我们在 <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>