ReactNative：如何使文本居中？

Question

如何在 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',
        justifyContent: 'center',
        alignItems: 'center',
    },
    headline: {
        fontWeight: 'bold',
        fontSize: 18,
    marginTop: 0,
        width: 200,
        height: 80,
    backgroundColor: 'yellow',
        justifyContent: 'center',
        alignItems: 'center',
    },

  otherContainer: {
        flex: 4,
        justifyContent: 'center',
        alignItems: 'center',
    backgroundColor: 'green',
    },

});

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

module.exports = SampleApp;

原文由 itinance 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

从 headline ‘ 样式中删除 height , justifyContent 和 alignItems 。它将垂直居中文本。添加 textAlign: 'center' 它将使文本水平居中。

   headline: {
    textAlign: 'center', // <-- the magic
    fontWeight: 'bold',
    fontSize: 18,
    marginTop: 0,
    width: 200,
    backgroundColor: 'yellow',
  }

原文由 Ivan Chernykh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

已经回答，但我想根据您的用例添加更多关于该主题和不同方法的内容。

您可以将 adjustsFontSizeToFit={true} （当前未记录）添加到 Text 组件以自动调整父节点内的大小。

   <Text adjustsFontSizeToFit={true} numberOfLines={1}>Hiiiz</Text>

您还可以在文本组件中添加以下内容：

 <Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>

或者您可以将以下内容添加到 Text 组件的父级中：

 <View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
     <Text>Hiiiz</Text>
</View>

或两者

 <View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
     <Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
</View>

或所有三个

 <View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
     <Text adjustsFontSizeToFit={true}
           numberOfLines={1}
           style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
</View>

这完全取决于你在做什么。您还可以查看我关于该主题的完整博客文章

https://medium.com/@vygaio/how-to-auto-adjust-text-font-size-to-fit-into-a-nodes-width-in-react-native-9f7d1d68305b

原文由 garrettmac 发布，翻译遵循 CC BY-SA 4.0 许可协议