美文网首页
React Native - flex 布局

React Native - flex 布局

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

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',
    },
});
  • 效果是这样:


    image.png

相关文章

网友评论

      本文标题:React Native - flex 布局

      本文链接:https://www.haomeiwen.com/subject/mwsegftx.html