reactjs – ReactNative：如何居中文本？

发布时间：2020-12-15 02:13:20 所属栏目：百科来源：网络整理

导读：如何在水平和垂直中将ReactNative中的文本居中？我在rnplay.org中有一个示例应用程序,其中justifyContent =“center”和alignItems =“center”不起作用： https://rnplay.org/apps/AoxNKQ 文本应该居中. 为什么文本(黄色)和父容器之间的顶部有一个边距？

如何在水平和垂直中将ReactNative中的文本居中？

我在rnplay.org中有一个示例应用程序,其中justifyContent =“center”和alignItems =“center”不起作用：
https://rnplay.org/apps/AoxNKQ

文本应该居中.
为什么文本(黄色)和父容器之间的顶部有一个边距？

码：

'use strict';

var React = require('react-native');
var {
  AppRegistry,StyleSheet,Text,Image,View,} = React;

var SampleApp = React.createClass({
  render: function() {
    return (
            <View style={styles.container}>
                <View style={styles.topBox}>
                    <Text style={styles.headline}>lorem ipsum{'n'}ipsum lorem lorem</Text>

                </View>
                <View style={styles.otherContainer}>
                </View>
            </View>
    );
  }
});

var styles = StyleSheet.create({

    container: {
        flex: 1,flexDirection: 'column',backgroundColor: 'red',justifyContent: 'center',alignItems: 'center',},topBox: {
        flex: 1,flexDirection: 'row',backgroundColor: 'lightgray',headline: {
        fontWeight: 'bold',fontSize: 18,marginTop: 0,width: 200,height: 80,backgroundColor: 'yellow',otherContainer: {
        flex: 4,backgroundColor: 'green',});

AppRegistry.registerComponent('SampleApp',() => SampleApp);

module.exports = SampleApp;

解决方法

从标题’样式删除高度,justifyContent和alignItems.它将垂直居中文本.添加textAlign：’center’,它将水平居中文本.

headline: {
    textAlign: 'center',// <-- the magic
    fontWeight: 'bold',}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!