ReactNative：如何将文本居中？

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

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

文本应该居中。
为什么文本（黄色）和父容器之间的顶部有边距

代码：

'use strict'；
var React=require（'React-native'）；
变量{
评估学，
样式表，
文本
形象
看法
}=反应；
var SampleApp=React.createClass({
render:function（）{
返回(
&lt；视图样式={styles.container}&gt；
&lt；视图样式={styles.topBox}&gt；
&lt；Text style={style.headline}&gt；lorem ipsum{'\n'}ipsum-lorem-lorem&lt；/Text&gt；
&lt；/View&gt；
&lt；视图样式={styles.otherContainer}&gt；
&lt；/View&gt；
&lt；/View&gt；
);
}
});
var styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'列'，
背景颜色：“红色”，
为内容辩护：“中心”，
对齐项目：“居中”，
},
机顶盒：{
弹性：1，
flexDirection:'行'，
背景颜色：“浅灰色”，
为内容辩护：“中心”，
对齐项目：“居中”，
},
标题：{
fontWeight:'粗体'，
尺码：18，
玛金托普：0，
宽度：200，
身高：80，
背景颜色：“黄色”，
为内容辩护：“中心”，
对齐项目：“居中”，
},
其他容器：{
弹性：4，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“绿色”，
},
});
AppRegistry.registerComponent（'SampleApp'，（）=&gt；SampleApp'）；
module.exports=SampleApp；