从零学React Native之06flexbox布局
前面我们接触了好多React Native代码,并没有介绍RN中的组件具体是如何布局的,这一篇文章,重点介绍下flexbox布局。 什么是flexbox布局React中引入了flexbox概念,flexbox是属于web前端领域CSS的一种布局方案,是2009年W3C提出了一种新的布局方案,可以简便、完整、响应式地实现各种页面布局。你可以简单的理解为flexbox是CSS领域类似Android中 React Native中对Web端的FlexBox进行了阉割,以用来适应移动设备。 RN利用flexBox模型布局,也就是在手机屏幕上对组件进行排列.利用flexBox模型,开发者可以开发出动态宽高的自适应的UI布局。 我们前面介绍过View,Text等组件的一些属性设置了,RN强大的UI布局能力主要是通过各个不同组件的样式(style)属性中的各个键的设置来实现的。大部分组件的style都支持flexbox布局。 下面就是我们常见的布局的写法: ...
class AwesomeProject extends Component {
render() {
return (
<View style={styles.container}> //根View
<View style={styles.test1}/> // 子View
<View style={styles.test2}/> // 子View
</View>
);
}
}
const styles = StyleSheet.create({
container: { //根View样式
flex: 1,backgroundColor: '#F5FCFF',},test1:{ // 子View样式
width:360,height:60,backgroundColor:'red'
},test2:{ //子View样式
width:40,height:40,backgroundColor:'blue'
}
});
flexbox中的样式主要有以下几类: 位置及宽、高相关的样式键位置主要是 首先讨论
宽高包括: 容器属性,决定子组件排列规则的键flexDirection: row:横向排列,主轴为水平方向; flexWrap: justifyContent: alignItems: 元素属性,决定组件显示规则的键flex: 开发者使用flex键时一定要小心,它的自动缩放意味着不仅可以改变自己的宽、高与位置,还可以通过挤压改变与它同级的其他组件的位置。 设置了flex:1的组件不是只能扩展,如果同级别固定宽高的组件在执行宽高增加了,那么设置flex:1的组件就会缩小来适应同级组件的宽和高变化. alignSelf: 边框、空隙与填充边框borderWith,填充 padding,组件空隙margin,接触过Android的同学看一眼下面的图应该就了解了。 组件多样式声明与动态样式声明组件可以有多种样式,可以把相同的样式抽取出去,方便复用。 写法如下: style={[styles.container,styles.aStyle,styles.bStyle]}
在多种样式中,如果对某一个键有重复定义,那么后面的样式定义的键将覆盖前面的. 在UI设计中,有些组件的样式在应用运行中是需要改变的,这时我们需要直接在描述组件的JSX代码中写入需要变化的样式. ...
<Text
onPress={this.onTextPress}
style={[styles.aStyle,{color:this.state.appColor1}]}>
...
...
onTextPress(){
this.setState({
appColor1:'red'
})
}
更多精彩请关注微信公众账号likeDev,公众账号名称:爱上Android。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |