react-native入门(四)----flexbox布局

宽高 因为全部的控件都是以堆积木的方式从低处往高处走，因此下面从上往下递增的木堆

export default class FixedDimensionsBasics extends Component {
  render() {
    return (
      <View>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
        <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}
复制代码

position:

能够取值relative(默认)相对布局,absolute绝对布局(也是相对于父视图)

绝对布局位置调整有top，bottom,left,right来布局

flex弹性宽高

在组件样式中使用flex可使其在可利用的空间中动态地扩张或收缩。通常而言咱们会使用flex:1指定某个组件扩张以撑满全部剩余的空间。若是有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。若是这些并列的子组件的flex值不同，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）。

注意分割父试图剩余空间，父试图若是没有规定大小，那么子视图设置flex也没法分割，分割法根据布局来走，默认为竖直方向

flexDirection

在组件的style中指定flexDirection能够决定布局的主轴

column竖直轴,默认值是竖直轴umn)方向。

row水平轴 : 子元素是横向从左日后方向排列;row-reverse也是水平方向子元素从右往左方向排列,

flexWrap属性

默认状况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，若是一条轴线排不下，如何换行。

它可能取三个值

flexWrap:'nowrap'（默认）：不换行。

flexWrap:'wrap'：换行，第一行在上方，要和alignItems:'flex-start'一块儿使用(默认是这个属性)，在必要的时候拆行，若是内部元素(子组件)设置好了大小，排列满了内部视图会自动换行

row-reverse本身应该能猜到了吧，就不上图了，就是居右了

Justify Content

在组件的 style 中指定justifyContent能够决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端仍是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有（前面三个挨着，后面的通常不挨着）：

下面的主要以flexDirection: row为例，column的看第一个图对比下column和row就明白了哈

flex-start(居前显示，多个在左边挨着，默认)、

center(子元素居中，多个会在中间挨着)、

flex-end(居后显示，多个会在右边挨着)、

后三个须要元素大于等于两个才有效果

space-between(两边元素贴边，中间间距平分剩余空间)、

space-around(两边元素不贴边、两边元素距离边为r，元素之间内部间距2r)

space-evenly(两边元素不贴边， 子元素与边缘之间间隙都同样)。

Align Items

在组件的 style 中指定alignItems能够决定其子元素沿着次轴（与主轴垂直的轴，好比若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端仍是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch(填充完毕次轴方向)。 这个以flexDirection:column为例 flex-start:

flex-end：

center:

stretch(填充次轴方向，主轴是竖着（垂直）的，那么水平方向填充满):

width标识横向长度，height标识纵向方向长度，不受方向布局约束

alignSelf

有五种类型:auto,flex-start,flex-end,center,stretch,用途能够忽略父组件中的alignItems中的取值，按照设置的alignSelf属性来走

默认为auto，按照父组件来，

大方向上经常使用的就这几个了，剩下的style属性列出来一些吧,flexbox经常使用的边距相关就是margin和padding, left，right这种事绝对布局使用的

基本上有一个属性，就有和他相对的试试吧，剩下的能够百度查找一下

margin开头的外边距 padding开头的内边距

marginHorizontal marginVertical paddingVertical paddingHorizontal width: 10px width: 100% borderColor: white borderBottom: 2px solid marginLeft marginBottom borderRadius: 10px borderWidth: 2px position: 'absolute' left: right: justifyContent: alignItems alignSelf display: flex flexDirection: column paddingBottom: fontSize: 20px fontWeight: 'bold' padding: 10px flex-wrap: 'wrap' color: backgoundColor:

ps：实际使用像素不是px哦，通常都是百分比布局

附上点代码:（实际使用一般是px2dp(像素)）

export let screenW = Dimensions.get('window').width;
export let screenH = Dimensions.get('window')/height;
const scale = 2;//屏幕像素比
const w = 750/scale;
const h = 1334/scale;//高度通常不推荐
设置字体的时候能够按照上面的比例来调整，例如
export default function px2dp（size） {
    let scaleWidth = screenW / w;
    size = Math.round((size*scaleWidth + 0.5)); //像素四舍五入，最小为0.5px
    return size/scale;
}
复制代码