3、手把手教React Native实战之flexbox布局

2023-07-23 19:04:16

flexbox是Flexible Box的缩写，弹性盒子布局主流的浏览器都支持

flexbox布局是伸缩容器(container)和伸缩项目(item)组成

Flexbox布局的主体思想是元素可以改变大小以适应可用空间，当可用空间变大，Flex元素将伸展大小以填充可用空间，当Flex元素超出可用空间时将自动缩小。总之，Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。

按照伸缩流的方向布局

伸缩容器有主轴和交叉轴组成！主轴既可以是水平轴，也可以是垂直轴

flexbox目前还处于草稿状态，所有在使用flexbox布局的时候，需要加上各个浏览器的私有前缀，即-webkit -moz -ms -o等

###伸缩容器的属性

1.display

display:flex | inline-flex

块级伸缩容器行内级伸缩容器

2.flex-direction

指定主轴的方向 flex-direction:row（默认值）| row-reverse | column | column-reverse

3.flex-wrap

伸缩容器在主轴线方向空间不足的情况下，是否换行以及该如何换行

flex-wrap:nowrap（默认值） | wrap | wrap-reverse

4.flex-flow

是flex-direction和flex-wrap的缩写版本，它同时定义了伸缩容器的主轴和侧轴
，其默认值为 row nowrap

5.justify-content

用来定义伸缩项目在主轴线的对齐方式，语法为：
justify-content:flex-start（默认值） | flex-end | center | space-between | space-around

6.align-items

用来定义伸缩项目在交叉轴上的对齐方式，语法为：
align-items:flex-start（默认值） | flex-end | center | baseline | stretch

7.align-content

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8"/>

  <title>Centering an Element on the Page</title>

  <style type="text/css">

      html {

  height: 100%;

} 

body {

  display: -webkit-box;  /* 老版本语法: Safari,  iOS, Android browser, older WebKit browsers.  */

  display: -moz-box;    /* 老版本语法: Firefox (buggy) */

  display: -ms-flexbox;  /* 混合版本语法: IE 10 */

  display: -webkit-flex;  /* 新版本语法： Chrome 21+ */

  display: flex;       /* 新版本语法： Opera 12.1, Firefox 22+ */

  /*垂直居中*/

  /*老版本语法*/

  -webkit-box-align: center;

  -moz-box-align: center;

  /*混合版本语法*/

  -ms-flex-align: center;

  /*新版本语法*/

  -webkit-align-items: center;

  align-items: center;

  /*水平居中*/

  /*老版本语法*/

  -webkit-box-pack: center;

  -moz-box-pack: center;

  /*混合版本语法*/

  -ms-flex-pack: center;

  /*新版本语法*/

  -webkit-justify-content: center;

  justify-content: center;

  margin: 0;

  height: 100%;

  width: 100% /* needed for Firefox */

} 

/*实现文本垂直居中*/

h1 {

  display: -webkit-box;

  display: -moz-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  -webkit-box-align: center;

  -moz-box-align: center;

  -ms-flex-align: center;

  -webkit-align-items: center;

  align-items: center;

  height: 10rem;

}    

  </style>

</head>

<body>

  <h1>OMG, I’m centered</h1>

</body>

</html>

###伸缩项目的属性

1.order

定义项目的排列顺序，数值越小，排列越靠前，默认值为0，语法为：order：整数值

2.flex-grow

定义伸缩项目的放大比例，默认值为0，即表示如果存在剩余空间，也不放大，语法为：flex-grow：整数值

3.flex-shrink

定义伸缩项目的收缩能力，默认值为1 ，其语法为：flex-shrink:整数值

4.flex-basis

用来设置伸缩项目的基准值，剩余的空间按比率进行伸缩，其语法为：flex-basis:length | auto，默认值为auto

5.flex

是flex-grow flex-shrink flex-basis这三个属性的缩写，其语法为：flex:none | flex-grow flex-shrink flex-basis，其中第二个和第三个参数为可选参数，默认值为：0 1 auto

6.align-self

###在React Native中使用flexbox

RN目前主要支持flexbox的如下6个属性：

1.alignItems

用来定义伸缩项目在交叉轴上的对齐方式，语法为：
alignItems:flex-start（默认值） | flex-end | center | stretch

2.alignSelf

用来设置单独的伸缩项目在交叉轴上的对齐方式，会覆盖默认的对齐方式，其语法为：alignSelf:auto | flex-start | flex-end | center | stretch(伸缩项目在交叉轴方向占满伸缩容器，如果交叉轴为垂直方向的话，只有在不设置高度的情况下才能看到效果)

3.flex

是flex-grow flex-shrink flex-basis这三个属性的缩写，其语法为：flex:none | flex-grow flex-shrink flex-basis，其中第二个和第三个参数为可选参数，默认值为：0 1 auto

4.flexDirection

指定主轴的方向 flex-direction:row| row-reverse | column（默认值） | column-reverse

5.flexWrap

6.justifyContent

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8"/>

  <title>第二个flexbox例子</title>

  <style type="text/css">

      html {

  height: 100%;

} 

body {

  display: -webkit-box;  /* 老版本语法: Safari,  iOS, Android browser, older WebKit browsers.  */

  display: -moz-box;    /* 老版本语法: Firefox (buggy) */

  display: -ms-flexbox;  /* 混合版本语法: IE 10 */

  display: -webkit-flex;  /* 新版本语法： Chrome 21+ */

  display: flex;       /* 新版本语法： Opera 12.1, Firefox 22+ */

flex-flow:row nowrap;

    /*垂直居中*/

  /*老版本语法*/

  -webkit-box-align: center;

  -moz-box-align: center;

  /*混合版本语法*/

  -ms-flex-align: center;

  /*新版本语法*/

  -webkit-align-items: center;

  align-items: center;

  /*水平居中*/

  /*老版本语法*/

  -webkit-box-pack: center;

  -moz-box-pack: center;

  /*混合版本语法*/

  -ms-flex-pack: center;

  /*新版本语法*/

  -webkit-justify-content: center;

  justify-content: center;

  margin: 0;

  height: 100%;

  width: 100% /* needed for Firefox */

} 

#box1{

    background: red;

    height:100px;

    width: 80px;

}

#box2{

    background: yellow;

    width: 80px;

    align-self:stretch;

}

#box3{

    background: green;

     height:100px;

    width: 80px;

    align-self:stretch;

}

  </style>

</head>

<body>

  <div id="box1">第一个</div>

  <div id="box2">第二个</div>

  <div id="box3">第三个</div>

</body>

</html>

##3、配套视频(下载地址)：https://yunpan.cn/cY4JGpecp5K7c 访问密码 b832

##4、配套视频(下载地址)：https://yunpan.cn/cYIG6dCUNIRkB 访问密码 d6b6

用HTML5和React Native分别实现盒子模型显示

写法不一样：1.样式 2.元素 3.书写格式

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <style>

      .height50 {

        height: 50px;

      }

      .height400 {

        height: 400px;

      }

      .height300 {

        height: 300px;

      }

      .height200 {

        height: 200px;

      }

      .height100 {

        height: 100px;

      }

      .width400 {

        width: 400px;

      }

      .bgred {

        background-color: #6AC5AC;

      }

      .bggreen {

        background-color:  #414142;

      }

      .bgyellow {

        background-color: #D64078;

      }

      .box {

        display: flex;

        flex-direction: column;

        flex: 1;

        position: relative;

        color: #FDC72F;

        line-height: 1em;

      }

      .label {

        top: 0;

        left: 0;

        padding: 0 3px 3px 0;

        position: absolute;

        background-color: #FDC72F;

        color: white;

        line-height: 1em;

      }

      .top {

        width: 100%;

        justify-content: center;

        display: flex;

        align-items: center;

      }

      .bottom {

        width: 100%;

        display: flex;

        justify-content: center;

        align-items: center;

      }

      .right {

        width: 50px;

        display: flex;

        justify-content: space-around;

        align-items: center;

      }

      .left {

        width: 50px;

        display: flex;

        justify-content: space-around;

        align-items: center;

      }

      .heightdashed {

        position: absolute;

        right: 20px;

        height: 100%;

        border-left: 1px solid #FDC72F;

      }

      .widthdashed {

        position: absolute;

        left: 0px;

        width: 100%;

        bottom: 24px;

        border-top: 1px solid #FDC72F;

      }

      .margginBox {

        position:absolute;

        top: 100px;

        padding-left:7px;

        padding-right:7px;

      }

      .borderBox {

        flex: 1;

        display: flex;

        justify-content: space-between;

      }

      .paddingBox {

        flex: 1;

        display: flex;

        justify-content: space-between;

      }

      .elementBox{

        flex: 1;

        display: flex;

        justify-content: space-between;

      }

      .measureBox {

        flex: 1;

        display: flex;

        justify-content: flex-end;

        align-items: flex-end;

      }

    </style>

  </head>

  <body>

    <span class="margginBox">

      <span class="box height400  width400">

        <span class="label">

          margin

        </span>

        <span class="top height50 bgred">

          top

        </span>

        <span class="borderBox">

          <span class="left bgred">

            left

          </span>

          <span class="box height300  ">

            <span class="label">

              border

            </span>

            <span class="top height50 bggreen">

              top

            </span>

            <span class="paddingBox">

              <span class="left bggreen">

                left

              </span>

              <span class="box height200  ">

                <span class="label">

                  padding

                </span>

                <span class="top height50 bgyellow">

                  top

                </span>

                <span class="elementBox">

                  <span class="left bgyellow">

                    left

                  </span>

                  <span class="box height100  ">

                    <span class="label">

                      element

                    </span>

                    <span class="widthdashed">

                    </span>

                    <span class="heightdashed">

                    </span>

                    <span class="measureBox">

                      <span class="right">

                        height

                      </span>

                    </span>

                    <span class="bottom  height50">

                      width

                    </span>

                  </span>

                  <span class="right bgyellow">

                    right

                  </span>

                </span>

                <span class="bottom  height50 bgyellow">

                  bottom

                </span>

              </span>

              <span class="right bggreen">

                right

              </span>

            </span>

            <span class="bottom  height50 bggreen">

              bottom

            </span>

          </span>

          <span class="right bgred">

            right

          </span>

        </span>

        <span class="bottom  height50 bgred">

          bottom

        </span>

      </span>

    </span>

  </body>

</html>

/**

 * Sample React Native App

 * https://github.com/facebook/react-native

 */

'use strict';

import React, {

  AppRegistry,

  Component,

  StyleSheet,

  Text,

  View

} from 'react-native';

class DongFang extends Component {

  render() {

    return (

        <View style={[BoxStyles.margginBox]}  ref="lab1">

          <View style={[BoxStyles.box,BoxStyles.height400,BoxStyles.width400]}>

            <View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bgred]}>

              <Text style={BoxStyles.yellow}>top</Text></View>

            <View style={[BoxStyles.borderBox]}>

              <View style={[BoxStyles.left,BoxStyles.bgred]} >

                <Text style={BoxStyles.yellow}>left</Text></View>

              <View style={[BoxStyles.box,BoxStyles.height300]}>

                <View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bggreen]}>

                  <Text style={BoxStyles.yellow}>top</Text></View>

                <View style={[BoxStyles.paddingBox]}>

                  <View style={[BoxStyles.left,BoxStyles.bggreen]} >

                    <Text style={BoxStyles.yellow}>left</Text></View>

                  <View style={[BoxStyles.box,BoxStyles.height200]}>

                    <View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bgyellow]}>

                      <Text style={BoxStyles.yellow}>top</Text></View>

                    <View style={[BoxStyles.elementBox]}>

                      <View style={[BoxStyles.left,BoxStyles.bgyellow]} >

                        <Text style={BoxStyles.yellow}>left</Text></View>

                      <View style={[BoxStyles.box,BoxStyles.height100]}>

                        <View  style={[BoxStyles.label]}>

                          <Text style={BoxStyles.white}>element</Text></View>

                        <View style={[BoxStyles.widthdashed]} ></View>

                        <View style={[BoxStyles.heightdashed]} ></View>

                        <View style={[BoxStyles.measureBox]} >

                          <View style={[BoxStyles.right]}>

                            <Text style={[BoxStyles.yellow]}>height</Text></View>

                        </View>

                        <View style={[BoxStyles.bottom,BoxStyles.height50]}>

                          <Text style={BoxStyles.yellow}>width</Text></View>

                      </View>

                      <View style={[BoxStyles.right,BoxStyles.bgyellow]}><Text style={BoxStyles.yellow}>right</Text></View>

                    </View>

                    <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bgyellow]}>

                      <Text style={BoxStyles.yellow}>bottom</Text></View>

                    <View style={[BoxStyles.label]}>

                      <Text style={BoxStyles.white}>padding</Text></View>

                  </View>

                  <View style={[BoxStyles.right,BoxStyles.bggreen]}><Text style={BoxStyles.yellow}>right</Text></View>

                </View>

                <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bggreen]}>

                  <Text style={BoxStyles.yellow}>bottom</Text></View>

                <View style={[BoxStyles.label]}><Text style={BoxStyles.white}>border</Text></View>

              </View>

              <View style={[BoxStyles.right,BoxStyles.bgred]}>

                <Text style={BoxStyles.yellow}>right</Text></View>

            </View>

            <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bgred]}>

              <Text style={BoxStyles.yellow}>bottom</Text></View>

            <View style={[BoxStyles.label]} ><Text style={BoxStyles.white}>margin</Text></View>

          </View>

        </View>

    );

  }

}

const BoxStyles = StyleSheet.create({

  height50:{

    height: 50,

  },

  height400:{

    height: 400,

  },

  height300:{

    height: 300,

  },

  height200:{

    height: 200,

  },

  height100:{

    height: 100,

  },

  width400:{

    width: 400,

  },

  width300:{

    width: 300,

  },

  width200:{

    width: 200,

  },

  width100:{

    width: 100,

  },

  bgred: {

    backgroundColor:'#6AC5AC',

  },

  bggreen: {

    backgroundColor: '#414142',

  },

  bgyellow: {

    backgroundColor: '#D64078',

  },

  box: {

    flexDirection: 'column',

    flex: 1,

    position: 'relative',

  },

  label: {

    top: 0,

    left: 0,

    paddingTop: 0,

    paddingRight: 3,

    paddingBottom: 3,

    paddingLeft: 0,

    position: 'absolute',

    backgroundColor: '#FDC72F',

  },

  top: {

    justifyContent: 'center',

    alignItems: 'center',

  },

  bottom: {

    justifyContent: 'center',

    alignItems: 'center',

  },

  right: {

    width: 50,

    justifyContent: 'space-around',

    alignItems: 'center',

  },

  left: {

    width: 50,

    justifyContent: 'space-around',

    alignItems: 'center',

  },

  heightdashed: {

    bottom: 0,

    top: 0,

    right: 20,

    borderLeftWidth: 1,

    position: 'absolute',

    borderLeftColor: '#FDC72F',

  },

  widthdashed: {

    bottom: 25,

    left: 0,

    right: 0,

    borderTopWidth: 1,

    position: 'absolute',

    borderTopColor: '#FDC72F',

  },

  yellow: {

    color: '#FDC72F',

    fontWeight:'900',

  },

  white: {

    color: 'white',

    fontWeight:'900',

  },

  margginBox:{

    position: 'absolute',

    top: 100,

    paddingLeft:7,

    paddingRight:7,

  },

  borderBox:{

    flex: 1,

    justifyContent: 'space-between',

    flexDirection: 'row',

  },

  paddingBox:{

    flex: 1,

    justifyContent: 'space-between',

    flexDirection: 'row',

  },

  elementBox:{

    flex: 1,

    justifyContent: 'space-between',

    flexDirection: 'row',

  },

  measureBox:{

    flex: 1,

    flexDirection: 'row',

    justifyContent: 'flex-end',

    alignItems:'flex-end',

  },

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: '#F5FCFF',

  },

  welcome: {

    fontSize: 20,

    textAlign: 'center',

    margin: 10,

  },

  instructions: {

    textAlign: 'center',

    color: '#333333',

    marginBottom: 5,

  },

});

AppRegistry.registerComponent('DongFang', () => DongFang);

##5、配套视频(下载地址)：https://yunpan.cn/cYIGk4LBKw4y6 访问密码 fd93

码农公寓

相关文章