react-native学习笔记-1 Flexbox布局

react-native
学习笔记

###1.flex属性
弹性（Flex）宽高，与Android中的weight(权重)相同,根据数值的等份填充父容器空间

###2.flexbox
指定某个组件的子元素的布局

####2.1. flexDirection属性
表示主轴方向，参数：row、column、row-reverse、column-reverse（row：横向，column：竖直,reverse:反向）

####2.2. justifyContent属性
主轴子控件排列方式

  • 相关属性：(字符方式说明：子控件:’.’ 空间:’_’)

    flex-start：  (...______)  整体靠开始方向（类似Android里面的start）,会超出屏幕
center：      (___...___)  整体居中排列,会超出屏幕
flex-end:     (______...)  整体靠结束方向（类似Android中的end）,会超出屏幕
space-around: (_.__.__._) 子控件环绕空余空间，两控件之间的空间是2倍，
             总长度（宽度超出屏幕后，子控件长度（宽度）均分，除第一项和最后一项）
space-between:(.___.___.) 子控件之间平分空余空间，首尾空间为0。会超出屏幕
space-evenly: (_._._._) 子控件均分空余空间，首尾存在空间。
             超出屏幕与<space-around>相似。 tips:这个空间分得不严谨

####2.3. alignItems
次轴子控件排列方式（与主轴垂直的轴）

  • 相关属性：

    flex-start:同justifyContent
center:同justifyContent
flex-end:同justifyContent
stretch：填充剩余空间，该方向宽度（长度）为0才生效

####3. 测试代码

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';

/**
 * flexbox测试
 * 
 */
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.item,{backgroundColor:'#f00',height:100}]}/>
        <View style={[styles.item,{backgroundColor:'#0f0',height:140}]}/>
        <View style={[styles.item,{backgroundColor:'#f5f',height:180}]}/>
        <View style={[styles.item,{backgroundColor:'#ff0'}]}/>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent:'space-evenly',
    alignItems:'flex-end',
    backgroundColor: '#ff5262'
  },
  item:{
    width:100,

  }
});

END

– Nowy

– 2018.10.25

分享到