ReactNative→FlexBox布局

Flexbox在布局中能够解决什么问题？

• 浮动布局
• 各种机型屏幕的适配
• 水平和垂直居中
• 自动分配宽度

一、简单的运用Flexbox

当没有超出屏幕宽度时居中显示

当超出屏幕宽度时居中显示

export default class helloworld extends Component {

  render() {

    return (
      

        {/*{this.renderBags()}*/}

        
        
        
        
        
        {/**/}
        {/**/}
        {/**/}
      
    );
  }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // 主轴对齐方式
    justifyContent: 'center',
    // 侧轴对齐方式
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    // 改变主轴方向
    flexDirection: 'row',
    // 换行显示
    flexWrap:'wrap',
  },
})

这里有个疑问：超过屏幕宽度时没有达到我想要的效果

二、获取 屏幕宽度参数

var Dimensions = require('Dimensions');
var {width, height, scale} = Dimensions.get('window');