如何在水平和垂直中将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 (
lorem ipsum{‘\n’}ipsum lorem lorem
);
}
});
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;