reactjs – ReactNative：如何居中文本？

如何在水平和垂直中将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',}