React Native 弹性布局FlexBox

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React Native 弹性布局FlexBox相关的知识,希望对你有一定的参考价值。

React Native采用一中全新的布局方式:FlexBox(弹性布局)。可以很方便的实现各种复杂布局,是全新的针对web和移动开发布局的一种实现方式。

何为FlexBox?

   完整名称为:the flexible box Module,旨在通过弹性的方式来对齐和分布容器中的组件。Flexbuju的主要思想是:让容器有能力让其子项目能够改变其宽度|高度|顺序,以最佳方式填充可用空间。

  在布局中,首先得确定主轴方向(flexDirection),主轴组件的对齐方式(justifyContent),侧轴组件的对齐方式(alignItems),通过以上四点可以基本确定布局。

FlexBox属性:

flexDirection:该属性确定了主轴方向,枚举值。

    row         主轴方向为水平,起点在左端。

    row- reverse      主轴方向为水平,起点在右端

    column    主轴方向为垂直,起点在上端

    column-reverse        主轴方向为垂直,起点在下端

justlfyContent:该属性确定了组件在主轴方向上的对齐方式,枚举值。

    flex-start(默认)   组件沿着主轴方向的起始位置靠齐。如:假如主轴方向是row的话就是左对齐,是row- reverse的话就是右对齐,是column的话就是上对齐,是 column-reverse的话就是下对齐。

    fle-end            组件沿着主轴方向的结束位置靠齐,和flex-start相反。

    space-betweem  组件在主轴方向上两端对齐,其中的间隔相等。

    space-around   组件会平均分配在主轴方向上,两端保留一定的位置空间。

alignsItems:组件在侧轴方向上的对齐方式。

    flex-start         组件沿着侧轴上的起点对齐

    flex-end          组件沿着侧轴上的终点对齐

    center      组价在侧轴方向上居中对齐

    stretch(默认)  组件在侧轴方向上占满

flexWrap: 是否换行

默认情况下,项目都排列在一条线上,放不下的部分则不放置,flexWap就是定义是否换行的。

    nowrap(默认)   不换行

    wrap            换行,第一行在上方

    wrap-reverse    换行,第一行在下方

flex:有三个参数,默认参数为 0 1 auto。  第一个参数为flex-grow,第二,第三个为:flex-shrink和flex-basis。

alignSelf:定义单个组件自己的对齐方式,默认为auto。枚举值:auto|flex-start|flex-end|center|baseline|stretch

position:枚举值,absolute绝对定位,relative相对定位

margin:内边距

padding:外边距

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * 周少停 2016-09-12
 * 弹性布局 flex-box 
 */

import React, { Component } from ‘react‘;
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from ‘react-native‘
/**-----------------------------------第一个示例程序----------------------------------------------------- **/
class Project extends Component {
  render() { //初始化
    return (
      <View style={styles.container}>
        <Text style={{backgroundColor:‘red‘,height:50}}>第一个</Text>
        <Text style={{backgroundColor:‘blue‘,height:100}}>第二个</Text>
        <Text style={{backgroundColor:‘green‘,height:160}}>第三个</Text>
        <Text style={{backgroundColor:‘yellow‘,height:200}}>第四个</Text>
      </View>
    );
  }
}
//样式
const styles = StyleSheet.create({
  container: {
//     flex:1,  //充满全屏,否则内容多少,只显示多少区域.   是‘flex-grow‘‘flex-shrink‘‘flex-basis‘三个属性的缩写,其中第二个和第三个参数都是可选,默认值是"0 1 auto" 宽度 = 弹性宽度 * (flexGrow/sum(flexGrow))
//     width:200,
    height:200,
    marginTop:20,//上边距
    backgroundColor:‘black‘,//背景色
    flexDirection:‘row‘, //React Native 布局采用FlexBox(弹性布局),该属性是设置布局的主轴方向为row:横向(默认方向是竖向:column)
    justifyContent:‘space-between‘, //定义了伸缩项目在主轴线的对齐方式 flex-start | flex-end | center | space-between | space-around 
    alignItems:‘flex-start‘    //定义了伸缩项目在侧轴(交叉轴)的对齐方式 flex-start | flex-end | center | baseline | stretch(默认) 
  }
});

/**-----------------------------------第二个示例程序----------------------------------------------------- **/
class Project1 extends Component {
  render() { //初始化
    return (
      <View style={styles1.container}>
        <Text style={{backgroundColor:‘red‘,width:200}}>第一个</Text>
        <Text style={{backgroundColor:‘blue‘,width:300}}>第二个</Text>
        <Text style={{backgroundColor:‘green‘,width:200}}>第三个</Text>
        <Text style={{backgroundColor:‘yellow‘,width:200}}>第四个</Text>
      </View>
    );
  }
}
const styles1 = StyleSheet.create({
   container:{
      backgroundColor:‘black‘,
      marginTop:20,
      flexDirection:‘row‘,
      justifyContent:‘flex-start‘,
      flexWrap:‘wrap‘ //定义显示不下的显示模式,默认情况下,控件都是在一条线上   wrap换行 nowarp(默认值)不换行 warp-reverse:换行,效果和wrap相反
   }
});
/**-----------------------------------第三个示例程序----------------------------------------------------- **/
 //alignSelf允许单个项目可以有自己单独的对齐方式
class Project2 extends Component{
  render(){
    return(
      <View style={styles2.container}>
        <Text style={{backgroundColor:‘red‘,flex:1,height:50,alignSelf:‘center‘}}>第一个</Text>  
        <Text style={{backgroundColor:‘blue‘,flex:2,height:30,alignSelf:‘flex-start‘}}>第二个</Text>
        <Text style={{backgroundColor:‘green‘,flex:2,height:70,alignSelf:‘flex-end‘}}>第三个</Text>
        <Text style={{backgroundColor:‘yellow‘,flex:1,height:80,alignSelf:‘stretch‘}}>第四个</Text>
      </View>
    );
  }
}
const styles2 = StyleSheet.create({
   container:{
     backgroundColor:‘black‘,
     marginTop:20,
     flexDirection:‘row‘
   }
});

AppRegistry.registerComponent(‘Project‘, () => Project2);  //注册

  完整源码下载:https://github.com/pheromone/React-Native-1

以上是关于React Native 弹性布局FlexBox的主要内容,如果未能解决你的问题,请参考以下文章

React Native 之 Flexbox(弹性盒子布局)

React Native知识1-FlexBox 布局内容

React Native布局

React Native FlexBox布局

React Native入门 认识Flexbox布局

React-Native之flexbox布局篇