React-Native 一些简单的使用方式

前言

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

//

//

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

//

背景透明backgroundColor:'transparent'

position
绝对定位