[React Native Android 安利系列]FLEX布局精讲
欢迎大家收看react-native-android系列教程,跟着本系列教程学习,可以熟练掌握react-native-android的开发,你值得拥有: 1. FLEX是什么?flex布局,本是一种新的css解决方案,它是『弹性布局』的缩写。我们上一节讲到过盒子模型,这个模型的值都是定死的,并不具备可伸缩的性质,所以,应对不同屏幕,做到响应式布局,就很困难。 2. react-native中的flex我们先来看看,上一节中提到的,react-native支持的flex布局的一些属性吧:
可以说,react-native对于flex布局的支持还是比较全面的,少了几个简写的属性,非常的简洁、使用。而且,排布与css的flex布局基本一致。接下来,我们将对这些属性进行一一讲解与实践。 2.1 flexDirection属性flex元素的排列方向,取值有:column|row 2.1.1column排布(默认)纵轴排列,竖向排列(如图2.1.1所示): class hellowReact extends Component { constructor(props) { super(props); } render() { return ( <View style={styles.container}> <View style={styles.avatar}> <Image source={myAvatar} style={styles.avatar} /> </View> <View style={[styles.shadowBlock,styles.back1]}> <Text>姓名:一筒</Text> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,backgroundColor: '#fff',},shadowBlock: { height: 100,width: 100,backgroundColor: '#0f0',back1: { elevation: 5,avatarArea: { width: 300,height: 300,avatar: { resizeMode: Image.resizeMode.contain,} });
2.1.2row排布横向排列,如图2.1.2所示 container: { flex: 1,flexDirection: 'row',
2.2flexWrap属性flex布局的换行行为,取值有:nowrap | wrap 2.2.1 nowrap排布不换行(默认),效果如图 2.2.1所示: class hellowReact extends Component { constructor(props) { super(props); } render() { return ( <View style={styles.container}> <View style={styles.avatar}> <Image source={myAvatar} style={styles.avatar} /> </View> <View style={[styles.shadowBlock,styles.back1]}> <Text>姓名:一筒</Text> </View> <View style={[styles.shadowBlock,} });
2.2.2wrap 换行,效果如图2.2.2所示:container: { flex: 1,flexWrap: 'wrap',
目测react-native对于换行的元素,采取的措施是隐藏。 2.3 alignItems属性flex布局元素中,子元素沿当前轴的交叉轴的排列方式。取值:'flex-start','flex-end','center','stretch'。请注意,这里说的是『当前轴的交叉轴』,flexDirection的值为row的话,元素为横向排列,则alignItems控制元素的上下对齐方式。flexDirection的值为column的话,alignItems控制元素的左右最起方式。 2.3.1 flex-start(默认)所有子元素排列在主轴开始处,flexDirection为row时效果如图2.3.1.1所示: class hellowReact extends Component { constructor(props) { super(props); } render() { return ( <View style={styles.container}> <View style={styles.avatar}> <Image source={myAvatar} style={styles.avatar} /> </View> <View style={[styles.shadowBlock,styles.back1]}> <Text>姓名:1筒</Text> </View> <View style={[styles.shadowBlock,styles.back1]}> <Text>姓名:2筒</Text> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,back1: { height: 200,} });
2.3.2 flex-end所有元素按照主轴结尾处排列,flexDirection为row时效果如图2.3.2.1所示: const styles = StyleSheet.create({ container: { flex: 1,alignItems: 'flex-end',.....
2.3.3center所有元素居中对齐,如图2.3.3所示: const styles = StyleSheet.create({ container: { flex: 1,alignItems: 'center',.....
2.3.4 stretch属性在当前轴的交叉轴上,进行拉伸。如果元素没有设置宽度或者高度的话,则使用该值时,将会被拉伸。 class hellowReact extends Component { constructor(props) { super(props); } render() { return ( <View style={styles.container}> <View style={styles.avatarArea}> <Image source={myAvatar} style={styles.avatar} /> </View> <View style={[styles.shadowBlock,styles.back1]}> <Text style={styles.text1}>姓名:1筒</Text> </View> <View style={[styles.shadowBlock,styles.back1]}> <Text style={styles.text2}>姓名:2筒</Text> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,alignItems: 'stretch',shadowBlock: { backgroundColor: '#0f0',back1: { },text1: { height: 100,text2: { height: 200,avatarArea: { backgroundColor: '#000' },} });
2.4 justifyContent属性justifyContent控制了元素在当前轴上的排列方式,当前轴有可能是column也有可能是row,下面以当前轴为row的情况做例子,column的情况,读着可以自己试着做做例子。另外注意,这个属性是设置在所有想排列的子元素的父级元素上的。
2.4.1 flex-start布局效果如图2.4.1所示 2.4.2flex-end布局如图2.4.2所示,元素都聚集到了当前轴(row)的结尾处: 2.4.3 center布局在当前轴居中,并两侧伸展排列,justifyContent: 'center',如图2.4.3所示 2.4.4space-between布局所有元素,填充满整个屏幕,元素与元素间的留白,平均分布,并且最左边的元素与最右边的元素两侧不加留白。justifyContent: 'space-between'如图2.4.4所示: 2.4.5space-around布局与space-between类似,只不过,使用此属性时,排列元素两侧也会有留白,最终效果会使所有元素的左右两侧留白均一致。 2.5alignSelf属性该属性其实与alignItems的属性锁表达的意义一致,是不过alignItems应用于父级元素上,决定了所有子元素的排布方式,而alignSelf应用于单个子元素上,决定了子元素自己的对其方式。 class hellowReact extends Component { constructor(props) { super(props); } render() { return ( <View style={styles.container}> <View style={styles.avatarArea}> <Image source={myAvatar} style={styles.avatar} /> </View> <View style={[styles.shadowBlock,styles.back1]}> <Text style={styles.text2}>姓名:2筒</Text> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,back1: { height: 100,avatarArea: { width: 100,height: 100,backgroundColor: '#000' },} });
avatarArea: { width: 100,//子元素设置了此属性 alignSelf: 'flex-start',
同样的,我们可以指定单个元素对其到开始、结尾、中间....,这就是alignSelf的用法了。 2.6flex属性这个属性可谓是flex布局中,非常重要的属性了。之前的开发方式中,我们会指定元素的宽度与高度,这样的写死的方式,无法适应各种屏幕下的适配。而指定元素的flex,则可以达到,元素的宽高,按照比例排布。 class hellowReact extends Component { constructor(props) { super(props); } render() { return ( <View style={styles.container}> <View style={styles.avatarArea}> <Image source={myAvatar} style={styles.avatar} /> </View> <View style={[styles.shadowBlock,alignItems: 'flex-start',back1: { // 指定后两个元素的flex值为2 flex: 2,text1: { },avatarArea: { // 指定第一个元素的flex值为1 flex: 1,} });
我们可以看到,此时元素的比例化为了1:2:2,这样布局,换了大屏幕的手机也依然会保持,妈妈再也不用担心我的屏幕适配了。 3. 今日作业请使用flex布局完成一个类似于手机百度首页FEED流布局的界面。 这一章,我们一起学习了flex布局的所有属性,下一章我们一起来做个例子,实现的就是今天的作业--手机百度上面新闻流的布局。
原创文章,版权所有,转载请注明出处 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |