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