前言
React-Native 已经学了很久了 但是有些基础的东西总是忘记所以给自己总结下一些总忘记的东西
内容
1.
flexDirection 改变主轴的方式 默认是纵轴
row: 从左向右依次排列
row-reverse: 从右向左依次排列
column(default): 默认的排列方式，从上向下排列
column-reverse: 从下向上排列
例 flexDirection:'row',
2.
上边距 marginTop:25,
3.
justifyContent 在主轴的对齐方式
flex-start(default)像一行的行首对齐
flex-end 像一行的尾部对齐
center向一行的中点位置对齐
space-between 两端对齐 每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同
space-around 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
justifyContent:'space-around',
4.
alignItems 侧轴(垂直于主轴)的对齐方式
flex-start(设置了高的默认值) 长度不同贴于上部
flex-end 长度不同贴于下部
center 长度不同贴于中间
strech (如果没有设置高 默认值 他们高度会根据俯视图填充)长度不同但是全根据最长的等高例
alignItems:'center',
5.flexWrap 轴线
flex和flexWrap不能同时存在nowrap(默认值)不换行 wrap 换行 第一行在上方 wrap-reversa 第一行在下方 和wrap相反flexWrap:'wrap'
6
flex 以百分比分 父视图的长度 比上flex的总长flex :1
7
Image加载本地图片require 加载网络图片 uri
//<Image source={require('./Simulato.png')} style={ styles.welcome }/>
//<Image source={uri:'https://www.baidu.com/img/bd_logo1.png'} style={ styles.welcome }/>
welcome:{
width:100,
height:100,
// 设置图片的圆角
borderRadius:30,
//设置图片的内容形式 resizeMode
//Image.resizeMode.cover 默认 图片居中显示 没有被拉伸 超出部分剪裁掉
resizeMode :Image.resizeMode.cover,
//Image.resizeMode.contain 容器完全容纳图片 图片等比例拉伸
resizeMode :Image.resizeMode.contain
//stretch 图片被拉伸适应容器大小 有可能发生变形
// 必须给宽度和高度
resizeMode :Image.resizeMode.stretch,
},
用图片设置背景 本地图片require 加载网络图片 uri
//<Image source={{uri:'https://www.baidu.com/img/bd_logo1.png'} } style={{ position:'absolute' marginTop:40,backgroundColor:'transparent'}}>
背景透明backgroundColor:'transparent'
position
绝对定位
</Image>
网友评论