ReactNative→FlexBox布局

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

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

一、简单的运用Flexbox

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

export default class helloworld extends Component {

  render() {

    return (
      <View  style={styles.container}>

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

        <View style={{width:80, height: 50, backgroundColor:'blue', alignSelf:'flex-end'}}></View>
        <View style={{width:50, height: 100, backgroundColor:'green'}}></View>
        <View style={{width:50, height: 50, backgroundColor:'yellow'}}></View>
        <View style={{width:90, height: 350, backgroundColor:'black'}}></View>
        <View style={{width:50, height: 80, backgroundColor:'yellow'}}></View>
        {/*<View style={{width:60, height: 100, backgroundColor:'green'}}></View>*/}
        {/*<View style={{width:80, height: 50, backgroundColor:'red', }}></View>*/}
        {/*<View style={{width:90, height: 180, backgroundColor:'black', alignSelf:'flex-end'}}></View>*/}
      </View>
    );
  }

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