react native学习笔记5——布局实战篇
目标基础知识的学习只有在实践中使用才更容易被理解与吸收,前面几节都是在介绍基本的属性概念,本人是一个比较健忘的人,估计很多人也跟我一样在学了基本概念后过不了多久就忘了,或者只是有个印象却不知道该怎么用该在何处运用这些特性。 网格布局网格布局示例的完整代码在: 基本的均分网格布局最简单的网格布局,就是平均分布,在容器里面平均分配空间。 代码示例如下: <View style={ {flexDirection:'row',height:40}}>
<View style={ {flex:1,backgroundColor:"grey"}}></View> <View style={ {flex:1,backgroundColor:"white"}}></View> <View style={ {flex:1,backgroundColor:"grey"}}></View> </View>
两边固定中间填充的网格两边的元素设置固定宽度 一般标题栏可以通过这种方法布局。 <View style={ {flexDirection:'row',height:40}}>
<View style={ {width:100,backgroundColor:"white"}}></View> <View style={ {width:100,backgroundColor:"grey"}}></View> </View>
嵌套的网格要实现一些稍微复杂点的效果,通常一层网格是搞不定的,这时需要网格嵌套网格,一层嵌套一层。如下图所示: 代码实现: <View style={ {flex:1}}>
<View style={ {flexDirection:'row',height:40}}> <View style={ {width:50,backgroundColor:"grey",justifyContent:"center",alignItems:"center"}}> <Text>返回</Text> </View> <View style={ {flex:1,backgroundColor:"white",alignItems:"center"}}> <Text>嵌套网格</Text> </View> <View style={ {width:50,alignItems:"center"}}> <Text>确认</Text> </View> </View> <View style={ {flexDirection:'row',flex:1,backgroundColor:"#cccccc",alignItems:"center"}}> <Text>do something...</Text> </View> </View>
一个稍微复杂点的界面下面通过实例运用前面介绍的几个基本网格布局,以及上一篇文章介绍的布局基本知识实现一个稍微复杂点的例子,完成如下效果: 事先声明,示例图中上面的banner和底部的tab都是假的,只是用静态图片代替,因为本文的重点是介绍布局,当然后面会介绍banner以及tabnavigation的使用。 步骤 整个页面的框架最外层是由一个上下的滑动视图+固定高度的底部导航栏构成。因此该布局可以由主轴为竖直轴( import React,{Component} from 'react';
import {
Text,View,ScrollView,Image
} from 'react-native';
export default class ComicMainDemo extends Component {
render() {
return (
<View style={styles.container}> <ScrollView> </ScrollView> <View style={styles.foot}> </View> </View> ); } } const styles = { container: { flex: 1,backgroundColor: '#d0d0d0' },foot: { height: 50,backgroundColor: '#ffffff',},};
效果图如下: 底部导航栏底部导航栏有四个图片等分底部,其实这里我们有两个思路:一个是用前面介绍的等分网格,为这四个子元素设置 <View style={styles.foot}>
<Image style={styles.footimage} source={require('../images/home_boy.png')}/> <Image style={styles.footimage} source={require('../images/book_boy.png')}/> <Image style={styles.footimage} source={require('../images/ground_boy.png')}/> <Image style={styles.footimage} source={require('../images/mine_boy.png')}/> </View>
然后为 foot: {
height: 50,backgroundColor: '#ffffff',flexDirection: "row",justifyContent: "space-around"
},footimage: {
height: 50,width: 50
}
效果图如下: 主体内容ScrollView主体内容可以分为三个模块,上:广告栏区,中:分类按钮区,下:推荐漫画区。在 <ScrollView>
<View style={styles.banner}> </View> <View style={styles.category}> </View> <View style={styles.recommend}> </View> </ScrollView>
banner: {
height: 200,backgroundColor: '#d0d0d0',category: {
height: 100,justifyContent: "space-around",paddingTop: 10,recommend: {
flex: 1,marginTop: 8,
Reload JS,可以看到: 广告栏广告栏区这里只用一个图片表示,由于本文主要讲解布局,所以就不用banner的组件(后面的文章会介绍用真正的banner做广告栏的),只是用静态图片代替。 <View style={styles.banner}>
<Image style={styles.bannerimage} source={{uri: 'https://manhua.qpic.cn/operation/0/15_00_20_3ffa389e446f5206e24c82ad5c24fd14_1500049213201.jpg/0'}}/> </View>
style加上 bannerimage: {
height: 200,
在看看效果: 已经有些雏形了有木有! 分类区分类区也是五个子元素均分整个区域,类似底部的导航栏,前面介绍导航栏时我说有两种思路,导航栏用了第二种,这里我就用第一种方法吧——均分网格。将每个子元素的 <View style={styles.category}>
<View style={styles.categorybox}> <Image style={styles.categoryimage} source={require('../images/vip_account.png')}/> <Text style={styles.categorytext}>男生榜</Text> </View> <View style={styles.categorybox}> <Image style={styles.categoryimage} source={require('../images/user_crown_is_vip.png')}/> <Text style={styles.categorytext}>人气榜</Text> </View> <View style={styles.categorybox}> <Image style={styles.categoryimage} source={require('../images/vip_finish.png')}/> <Text style={styles.categorytext}>热卖榜</Text> </View> <View style={styles.categorybox}> <Image style={styles.categoryimage} source={require('../images/vip_cloud.png')}/> <Text style={styles.categorytext}>排行榜</Text> </View> <View style={styles.categorybox}> <Image style={styles.categoryimage} source={require('../images/color_for_danmu_select.png')}/> <Text style={styles.categorytext}>分类</Text> </View> </View>
加上它们对应的style样式: categorybox: {
flex: 1,alignItems: "center"
},categoryimage: {
height: 50,width: 50,categorytext: {
alignSelf: 'center',fontSize: 12,color: '#333333',
再次Reload看看效果: 已经越来越是那么回事了! 推荐区推荐区这里又分为两部分,上方的小标题栏,以及下方的图片展示区。 <View style={styles.recommend}>
<View style={styles.recommendtitlecontainer}> <View style={styles.recommendspaceview}></View> <View style={styles.recommendtitle}> <Text style={styles.recommendtitletext}>主编推荐</Text> </View> <View style={styles.recommendspaceview}> <Image style={styles.recommendmoreimage} source={require('../images/more_boy.png')}/> </View> </View> </View>
相应的style样式: recommendtitlecontainer: {
height: 50,justifyContent:"center",flexDirection:"row"
},recommendspaceview: {
justifyContent:"center",width:100,recommendtitle: {
flex:1,recommendtitletext: {
alignSelf: 'center',fontSize: 14,recommendmoreimage: {
height: 35,width:80,alignSelf: 'center',
接下来是最后的图片展示区了,在 <View style={styles.recommendcomic}>
<Image style={styles.recommendcomicimage} source={{uri: 'https://manhua.qpic.cn/vertical/0/21_14_21_96ed95f31667b3966cb0e0521ce13703_1498026084112.jpg/420'}}/> <Image style={styles.recommendcomicimage} source={{uri: 'https://manhua.qpic.cn/vertical/0/21_14_21_96ed95f31667b3966cb0e0521ce13703_1498026084112.jpg/420'}}/> <Image style={styles.recommendcomicimage} source={{uri: 'https://manhua.qpic.cn/vertical/0/21_14_21_96ed95f31667b3966cb0e0521ce13703_1498026084112.jpg/420'}}/> <Image style={styles.recommendcomicimage} source={{uri: 'https://manhua.qpic.cn/vertical/0/21_14_21_96ed95f31667b3966cb0e0521ce13703_1498026084112.jpg/420'}}/> <Image style={styles.recommendcomicimage} source={{uri: 'https://manhua.qpic.cn/vertical/0/21_14_21_96ed95f31667b3966cb0e0521ce13703_1498026084112.jpg/420'}}/> <Image style={styles.recommendcomicimage} source={{uri: 'https://manhua.qpic.cn/vertical/0/21_14_21_96ed95f31667b3966cb0e0521ce13703_1498026084112.jpg/420'}}/> </View>
最后,我们再在styles对象里给图片展示区添加相应的样式。 recommendcomic: {
flex: 1,marginTop: 5,flexWrap:"wrap",paddingBottom:10,recommendcomicimage: {
height: 160,width:140,marginTop:10,
再来看看最终的效果吧: 是不是有些小小的成就感,当然真正的应用布局远比这个Demo复杂,本文只是提供一个运用前面基础布局知识的思路,算是抛砖引玉吧。本文中的顶部的广告栏和底部导航栏都只是用了简单的图片替代,并没实现真正的效果。后面我会专门介绍navigation及spanner来实现导航栏和广告栏的。 最后附上本节的完整代码 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |