React Native 学习笔记之--布局

React Native 学习笔记之–布局

今天记录一下React Native关于布局的基础知识

控件宽高

React Native中使用width和height来指定控件的固定宽高，用flex可以使控件在可利用的空间中动态地扩张或收缩

• flex：1 -> 充满全屏

export default class MyTest extends Component {
    render() {
        return (
            <View style={styles.container}>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'red',
    }
});

• flex控制子控件的大小

render() {
        return (
            <View style={styles.container}>
                <View style={{backgroundColor: 'red', width: 100, height: 200}}>
                    <View style={{backgroundColor:'yellow', width: 100, flex: 1}}></View>
                    <View style={{backgroundColor:'green', width: 100, flex: 2}}></View>
                </View>
            </View>
        );
    }

由上图可以看出green和yellow视图根据flex分割父视图的高度

• 获取屏幕的宽高

// 获取屏幕的信息(宽度、高度、屏幕密度)
var screenWidth = require('Dimensions').get('window').width;
var screenHeight = require('Dimensions').get('window').height;
var scale = require('Dimensions').get('window').scale;

FlexBox布局

FlexBox布局就是用来控制界面上的控件的布局用的，主要有flexDirection、alignItems和 justifyContent三个样式属性。

• flexDirection属性：
  row：主轴为水平方向，起点在左端。
  row-reverse：主轴为水平方向，起点在右端。
  column(默认值)：主轴为垂直方向，起点在上沿。
  column-reverse：主轴为垂直方向，起点在下沿。
  demo：

render() {
        return (
            <View style={styles.container}>
                <View style={{flex:1, flexDirection: 'row', marginTop: 30}}>
                    <View style={{width: 50, height: 50, backgroundColor:'red'}}></View>
                    <View style={{width: 50, height: 50, backgroundColor:'yellow'}}></View>
                    <View style={{width: 50, height: 50, backgroundColor:'green'}}></View>
                </View>
            </View>
        );
    }

效果图：
row

row-reverse

column

column-reverse

• justifyContent：可以决定其子元素沿着主轴的排列方式
  对应的这些可选项有：flex-start、center、flex-end、space-around以及space-between。
  flex-start(默认值)：伸缩项目向一行的起始位置靠齐。
  flex-end：伸缩项目向一行的结束位置靠齐
  center：伸缩项目向一行的中间位置靠齐
  space-between：两端对齐，项目之间的间隔都相等
  space-around：伸缩项目会平均地分布在行里，两端保留一半的空间
  现在通过实例来展示上面这几个属性

render() {
        return (
            <View style={styles.container}>
                <View style={{flex:1, justifyContent:'flex-start',flexDirection:'row', marginTop: 30}}>
                    <View style={{width: 50, height: 50, backgroundColor:'red'}}></View>
                    <View style={{width: 50, height: 50, backgroundColor:'yellow'}}></View>
                    <View style={{width: 50, height: 50, backgroundColor:'green'}}></View>
                </View>
            </View>
        );
    }

这里使用的主轴是‘row’,
效果图：
flex-start

center

flex-end

space-around

space-between

• alignItems属性：决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。
  可选项有：flex-start、center、flex-end以及stretch。
  flex-start：交叉轴的起点对齐
  flex-end：交叉轴的终点对齐
  center：交叉轴的中点对齐
  baseline：项目的第一行文字的基线对齐
  stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
  demo:
  这里主轴为’row’,主轴排列方式为’flex-start’,次轴方向为column

render() {
        return (
            <View style={styles.container}>
                <View style={{flex:1, alignItems: 'flex-start',flexDirection:'row', marginTop: 30}}>
                    <View style={{ width: 50, height: 50, backgroundColor:'red'}}></View>
                    <View style={{width: 50, height: 50, backgroundColor:'yellow'}}></View>
                    <View style={{width: 50, height: 50, backgroundColor:'green'}}></View>
                </View>
            </View>
        );
    }

效果图：
flex-start

center

flex-end

stretch
这里要取消子视图高度的设置

• flexWrap属性: 用于控制轴线上面的子控件在超出屏幕范围后，是否换行
  nowrap(默认值)：不换行
  wrap：换行，第一行在上方
  wrap-reverse：换行，第一行在下方。（和wrap相反）
• alignSelf属性：用于控制单个控件在父控件中的对齐方式
  auto | flex-start | flex-end | center | baseline | stretch