React Native - flex 布局

作者: Grabin | 来源:发表于2018-09-11 10:30 被阅读82次

03-Flexible Box
Flex布局
React Native学习资料
Flex布局
React Native - Flex布局
绿侠快充App技术整理
React之Flex
React-Native flex 布局使用总结
react native布局小知识之主次轴，排列方式
React Native 如何实现绝对定位的loading？

flex: 可以表示与父控件的比例

设置 flexDirection，改变主轴方向

export default class App extends Component<Props> {
    render() {
        return (
            <View style={bigViewStyle.container}>
                <Text style={{backgroundColor: 'blue'}}>Text 1</Text>
                <Text style={{backgroundColor: 'red'}}>Text 2</Text>
                <Text style={{backgroundColor: 'yellow'}}>Text 3</Text>
                <Text style={{backgroundColor: 'brown', width: 200}}>Text 4</Text>
            </View>
        );
    }
}
const bigViewStyle = StyleSheet.create({
    container: {
        marginTop: 30,
        flexDirection: 'row',
        height: 40,
    },
});

image.png

使用flex, 设置比例参数

export default class App extends Component<Props> {
    render() {
        return (
            <View style={bigViewStyle.container}>
                <Text style={{backgroundColor: 'blue', flex: 1}}>Text 1</Text>
                <Text style={{backgroundColor: 'red', flex: 1}}>Text 2</Text>
                <Text style={{backgroundColor: 'yellow', flex: 2}}>Text 3</Text>
                <Text style={{backgroundColor: 'brown', width: 200}}>Text 4</Text>
            </View>
        );
    }
}

image.png

设置 justifyContent，改变主轴对齐方式

justifyContent	Value
`flex-start`	左对齐
`flex-end`	右对齐
`center`	居中
`space-between`	有间距
`space-around`	左右有间距

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

type Props = {};

var Dimensions = require('Dimensions')
let screenWidth = Dimensions.get('window').width

export default class App extends Component<Props> {
  render() {
    return (
      <View style={bigViewStyle.container}>
        <View style={firstViewStyle.container}>
            <Text style={{backgroundColor: 'red'}}>Hellow 1</Text>
            <Text style={{backgroundColor: 'green'}}>Hellow 2</Text>
            <Text style={{backgroundColor: 'yellow'}}>Hellow 3</Text>
            <Text style={{backgroundColor: 'purple'}}>Hellow 4</Text>
        </View>
          <View style={secondViewStyle.container}>
              <Text style={{backgroundColor: 'red'}}>Hellow 1</Text>
              <Text style={{backgroundColor: 'green'}}>Hellow 2</Text>
              <Text style={{backgroundColor: 'yellow'}}>Hellow 3</Text>
              <Text style={{backgroundColor: 'purple'}}>Hellow 4</Text>
          </View>
          <View style={thirdViewStyle.container}>
              <Text style={{backgroundColor: 'red'}}>Hellow 1</Text>
              <Text style={{backgroundColor: 'green'}}>Hellow 2</Text>
              <Text style={{backgroundColor: 'yellow'}}>Hellow 3</Text>
              <Text style={{backgroundColor: 'purple'}}>Hellow 4</Text>
          </View>
      </View>
    );
  }
}

const bigViewStyle = StyleSheet.create({
    container: {
        flex: 1,
    },
});

const firstViewStyle = StyleSheet.create({
    container: {
      flexDirection: 'row',
        height: 80,
        width: screenWidth,
        backgroundColor: 'white',
        marginTop: 30,
        justifyContent: 'flex-end',
    },
});

const secondViewStyle = StyleSheet.create({
    container: {
        flexDirection: 'row',
        height: 80,
        width: screenWidth,
        backgroundColor: 'white',
        marginTop: 30,
        justifyContent: 'space-between',
    },
});

const thirdViewStyle = StyleSheet.create({
    container: {
        flexDirection: 'row',
        height: 80,
        width: screenWidth,
        backgroundColor: 'white',
        marginTop: 30,
        justifyContent: 'space-around',
    },
});

效果是这样：

image.png

设置 alignItems，改变侧轴对齐方式

alignItems	Value
`flex-start`	顶对齐
`flex-end`	底对齐
`center`	居中

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

type Props = {};

var Dimensions = require('Dimensions')
let screenWidth = Dimensions.get('window').width

export default class App extends Component<Props> {
  render() {
    return (
      <View style={bigViewStyle.container}>
        <View style={firstViewStyle.container}>
            <Text style={{backgroundColor: 'red', height: 60}}>Hellow 1</Text>
            <Text style={{backgroundColor: 'green', height: 30}}>Hellow 2</Text>
            <Text style={{backgroundColor: 'yellow', height: 40}}>Hellow 3</Text>
            <Text style={{backgroundColor: 'steelblue', height: 10}}>Hellow 4</Text>
        </View>
          <View style={secondViewStyle.container}>
              <Text style={{backgroundColor: 'red', height: 60}}>Hellow 1</Text>
              <Text style={{backgroundColor: 'green', height: 30}}>Hellow 2</Text>
              <Text style={{backgroundColor: 'yellow', height: 40}}>Hellow 3</Text>
              <Text style={{backgroundColor: 'steelblue', height: 10}}>Hellow 4</Text>
          </View>
          <View style={thirdViewStyle.container}>
              <Text style={{backgroundColor: 'red', height: 60}}>Hellow 1</Text>
              <Text style={{backgroundColor: 'green', height: 30}}>Hellow 2</Text>
              <Text style={{backgroundColor: 'yellow', height: 40}}>Hellow 3</Text>
              <Text style={{backgroundColor: 'steelblue', height: 10}}>Hellow 4</Text>
          </View>
      </View>
    );
  }
}

const bigViewStyle = StyleSheet.create({
    container: {
        flex: 1,
    },
});

const firstViewStyle = StyleSheet.create({
    container: {
      flexDirection: 'row',
        height: 80,
        width: screenWidth,
        backgroundColor: 'skyblue',
        marginTop: 30,
        justifyContent: 'flex-end',
        alignItems: 'flex-start',
    },
});

const secondViewStyle = StyleSheet.create({
    container: {
        flexDirection: 'row',
        height: 80,
        width: screenWidth,
        backgroundColor: 'skyblue',
        marginTop: 30,
        justifyContent: 'space-between',
        alignItems: 'flex-end',
    },
});

const thirdViewStyle = StyleSheet.create({
    container: {
        flexDirection: 'row',
        height: 80,
        width: screenWidth,
        backgroundColor: 'skyblue',
        marginTop: 30,
        justifyContent: 'space-around',
        alignItems: 'center',
    },
});

效果是这样：

image.png

设置 flexWrap，让控件换行显示

image.png

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

type Props = {};

var Dimensions = require('Dimensions')
let screenWidth = Dimensions.get('window').width

export default class App extends Component<Props> {
  render() {
    return (
      <View style={bigViewStyle.container}>
        <View style={firstViewStyle.container}>
            <Text style={{backgroundColor: 'red', width: 160}}>Hellow 1</Text>
            <Text style={{backgroundColor: 'green', width: 60}}>Hellow 2</Text>
            <Text style={{backgroundColor: 'yellow', width: 180}}>Hellow 3</Text>
            <Text style={{backgroundColor: 'steelblue', width: 110}}>Hellow 4</Text>
        </View>
      </View>
    );
  }
}

const bigViewStyle = StyleSheet.create({
    container: {
        flex: 1,
    },
});

const firstViewStyle = StyleSheet.create({
    container: {
      flexDirection: 'row',
        height: 80,
        width: screenWidth,
        backgroundColor: 'skyblue',
        marginTop: 30,
        flexWrap: 'wrap',
    },
});