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',
    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;