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>

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

正如您在<Text>-Component 的绿色背景图像上看到的那样，文本没有完全居中。即使它本身是完美对齐的......

这里是 Expo 的小吃，整个代码减少到必要的大小，并具有不同的示例大小：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，文本被剪切并覆盖在圆圈上。分配给剪切Text 的lineHeight 超出了要求，因此显示为misaligned。

因此，您需要根据圆的边框半径减少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
   }}>

这是点心link