reactjs - react native : how to center text?

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;

Answer 1

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

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