React Native FlexBox布局

一、FlexBox布局
1、FlexBox什么是什么意思呢？
flexible(形容词)：能够伸缩或者很容易变化，以适应外界条件的变化
box（名词）：通用的矩形容器
2、什么是FlexBox布局？
弹性盒模型(The FlexiBle Box Module),又叫Flexbox,意为“弹性布局”，旨在
通过弹性的方式来对齐和分布容器中内容的控件，使其能适应不同屏幕，为盒装模型提供最大的灵活性。
Flex布局主要思想是：让容器有能力让其子项目能够改变其宽度，高度(甚至是顺序)，
以最佳方式填充可用空间：
React Native中的FlexBox是这个规范的一个子集。

二、flexbox在开发过程中的应用场景
2.1、FlexBox在布局中能够解决什么问题？
浮动布局
各种机型屏幕的适配
水平和垂直居中
自动分配宽度
......

三、Flexbox的常用属性
3.1容器属性
a).flexDirection:'row|row-reverse|column|column-reverse'
该属性决定主轴的方向(即项目的排列方向)。
row:主轴为水平方向，起点在左端。
row-reverse:主轴为水平方向，起点在右端。
column(默认值)：主轴为垂直方向，起点在上沿。
column-reverse:主轴为垂直方向，起点在下沿。

注释：
{/*要注释的内容*/}

b)justifyContent:'flex-start|flex-end|center|space-between|space-around'
定义了伸缩项目在主轴线的对齐方式
flex-start(默认值)：伸缩项目一行的起始位置靠齐
flex-end:伸缩项目向一行的结束位置靠齐
center:伸缩项目向一行的中间位置靠齐。
space-between:两端对齐，项目之前的间隔相等。
space_around:伸缩项目会平均地分布在行里，连段保留一半的空间。

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


 
export default class FirstProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        {/*<Text>其实我是存在的</Text>*/}
        <View style={styles.innerViewStyle}>
         <Text>我是在里边的View</Text>
        </View>
        <View style={styles.innerViewStyle2}>
         <Text>我是在里边的下面View</Text>
        </View>

         
      </View>
    );
  }
}
const styles=StyleSheet.create({
  container:{
   // flex:1,
   backgroundColor:'red',
   width:300,
   height:100,
   //改变主轴方向--》默认是竖向
   flexDirection:'row'
  },
  innerViewStyle:{
    backgroundColor:'green',
    width:100
  },
  innerViewStyle2:{
    backgroundColor:'yellow',
    width:100
  },
});

运行如下：

FlexBox默认布局

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

export default class FirstProject extends Component {
  render() {
    return (
      <View style={styles.container}>
         <Text style={{backgroundColor:'red'}}>第一个</Text>
         <Text style={{backgroundColor:'yellow'}}>第二个</Text>
         <Text style={{backgroundColor:'green'}}>第三个</Text>
         <Text style={{backgroundColor:'blue'}}>第四个</Text>
      </View>
    );
  }
}
const styles=StyleSheet.create({
  container:{
   backgroundColor:'purple'

  }
});

如下：

FlexBox改变主轴方向

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

export default class FirstProject extends Component {
  render() {
    return (
      <View style={styles.container}>
         <Text style={{backgroundColor:'red'}}>第一个</Text>
         <Text style={{backgroundColor:'yellow'}}>第二个</Text>
         <Text style={{backgroundColor:'green'}}>第三个</Text>
         <Text style={{backgroundColor:'blue'}}>第四个</Text>
      </View>
    );
  }
}
const styles=StyleSheet.create({
  container:{
   backgroundColor:'purple',
   //改变主轴方向
   flexDirection:'row'

  }
});

如下图：

FlexBox上边距：

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

export default class FirstProject extends Component {
  render() {
    return (
      <View style={styles.container}>
         <Text style={{backgroundColor:'red'}}>第一个</Text>
         <Text style={{backgroundColor:'yellow'}}>第二个</Text>
         <Text style={{backgroundColor:'green'}}>第三个</Text>
         <Text style={{backgroundColor:'blue'}}>第四个</Text>
      </View>
    );
  }
}
const styles=StyleSheet.create({
  container:{
   backgroundColor:'purple',
   //上边距
   marginTop:25,
   //改变主轴方向
   flexDirection:'row'

  }
});

如下图：

设置主轴线的对齐方式

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

export default class FirstProject extends Component {
  render() {
    return (
      <View style={styles.container}>
         <Text style={{backgroundColor:'red'}}>第一个</Text>
         <Text style={{backgroundColor:'yellow'}}>第二个</Text>
         <Text style={{backgroundColor:'green'}}>第三个</Text>
         <Text style={{backgroundColor:'blue'}}>第四个</Text>
      </View>
    );
  }
}
const styles=StyleSheet.create({
  container:{
   backgroundColor:'purple',
   //上边距
   marginTop:25,
   //改变主轴方向
   flexDirection:'row',
   //设置主轴的对齐方式
   justifyContent:'flex-start'

  }
});

//设置主轴的对齐方式

justifyContent:'flex-start'

//设置主轴的对齐方式

justifyContent:'space-between'

//设置主轴的对齐方式

justifyContent:'space-around'

//设置主轴的对齐方式

justifyContent:'flex-end'

//设置主轴的对齐方式

justifyContent:'center'

React Native FlexBox布局

猜你喜欢