rn html怎样水平居中,reactjs – ReactNative:如何居中文本?

  • Post author:
  • Post category:其他


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