Question

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

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

        <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

我只用文本并计算行高尝试了前面的答案。看起来有点矫kill过正，对我没有用。所以这是我的答案。

我将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的{{1}}超出了要求，因此会显示Text。

因此，您需要根据圆圈的borderRadius缩小misaligned和fontSize，以便适用于所有尺寸。

lineHeight

这是一个小吃link

React Native：完美地将文本对齐为圆形

2 个答案: