Question

我的Text组件略高于其中的实际文本。是否可以将此文本的中心垂直对齐在其背景中？

文字在这里：

<Text style={styles.container}>{this.props.title}</Text>

样式在这里：

const styles = StyleSheet.create({
    container: {
        height: 30,
        justifyContent: 'center',
        alignItems: 'center',
        fontWeight: 'bold',
        backgroundColor: '#fff',
    }
});

Answer 1

设置与lineHeight相同的组件的height应修复它。

const styles = StyleSheet.create({
    container: {
        height: 30,
        lineHeight: 30,
        justifyContent: 'center',
        alignItems: 'center',
        fontWeight: 'bold',
        backgroundColor: '#fff',
    }
});

Answer 2

我遇到了这个问题，lineHeight在Android上找不到中心文字。看到： https://github.com/facebook/react-native/issues/13126

然后文本样式属性“textAlignVertical”可能是解决方案，请参阅 https://facebook.github.io/react-native/docs/text-style-props.html#textalignvertical

一个例子：

<Text style={{textAlignVertical: 'center', textAlign:'center'}}>Horizontal and Vertical centerd text</Text>

Answer 3

弗拉迪斯拉夫，尝试像这样的方法：

const styles = StyleSheet.create({
container: {
    fontWeight: 'bold';
    background: grey;
    width: 40%;
    border: 1px solid black;
    margin: auto;
    text-align: center;   
    position: center;
    padding: 16px;
}

}）；

告诉我，情况如何：）

文本组件中的中心文本，React Native

3 个答案: