react-native 之布局篇

2022-11-26 19:12:40

一.宽度单位和像素密度

　　react的宽度不支持百分比,设置宽度时不需要带单位,那么默认的单位是什么呢?

 /**

  * Sample React Native App

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

  */

 'use strict';

 import React, {

   AppRegistry,

   Component,

   StyleSheet,

   Text,

   View,

   Dimensions,

   PixelRatio

 } from 'react-native';

 class MyProject2 extends Component {

      render (){

          let {height,width}=Dimensions.get('window');

          let pixelRatio=PixelRatio.get();

          let {pheight,pwidth}={

              pheight:PixelRatio.getPixelSizeForLayoutSize(200),

              pwidth:PixelRatio.getPixelSizeForLayoutSize(100)

          }

          return(

              <View>

                  <Text>屏幕高度:{height}</Text>

                  <Text>屏幕宽度:{width}</Text>

                  <Text>dp(密度,与160px/inch的比值):{pixelRatio}</Text>

                  <Text>200布局高度转化为:{pheight}px</Text>

                  <Text>100布局宽度转化为:{pwidth}px</Text>

              </View>

          );

      }

 }

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

　　我的模拟器分辨率是768X1280的,获取的是384X592,像素密度是2px/inch,这里可以确定单位不是px,下面将200,100布局高度转换为像素

　　都是x2的结果,可以知道单位是密度了.至于上面的高度为什么不符合暂时保留问题.

二.Flex布局

　　1.什么是Flex布局?布局的传统解决方案,是基于盒子模型,依赖display属性+position属性+float属性,这种布局方式对于特殊布局非常不方便,

　　　比如,垂直居中就不好实现.2009年,W3c提出的Flex布局,即弹性布局,用来为盒子模型提供最大的灵活性,任何一个容器都可以指定为Flex布局.

　　2.容器的属性(6个)

　　　　ReatNative的flex布局和web的略有不同,下面的这些属性在RN中不用写中间"-",并且第二个单词首字母大写

　　　　flex-direction:子项目的在主轴的排列方式

　　　　　　　　　　row (默认值):主轴为水平方向,起点在左端

　　　　　　　　　　row-reverse:主轴为水平方向,起点在右端(RN似乎不支持)

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

　　　　　　　　　　column-reverse:主轴为垂直方向,起点在下沿(RN也不支持)

　　　　flex-wrap:默认,项目都排在一条线上(又称"轴线")上

　　　　　　　　　　nowrap 不换行 (默认)| wrap换行 |wrap-reverse 换行,第一行在下方

　　　　　　　　　　RN似乎也不支持

　　　　flex-flow:属性是flex-direction和flex-wrap的简写形式,默认是row nowrap,RN没试过

　　　　justify-content:定义项目在主轴上的对齐方式

　　　　　　　　　　flex-start(默认值) 左对齐 | flex-end (右对齐) | center(居中) | space-between (两端对齐,项目之间间隔相等)

　　　　　　　　　　| space-around (每个项目两侧的间隔相等,所以项目之间的间隔比项目与边框的间隔大一倍)

　　　　align-items:定义项目在交叉轴上如何对齐

　　　　　　　　　　flex-start (交叉轴的起点) | flex-end (终点) | center(中点对齐) | baseline(项目的第一行文字的基线对齐)

　　　　　　　　　　| stretch (默认值)如果项目未设置高度或者设为auto,将占满整个容器

　　　　align-content:定义了多根轴线的对齐方式,如果项目只有一根轴线,该属性不起作用

　　　　　　　　　　　　flex-start | flex-end | center | space-between | space-around

　　　　3.项目的属性(6个)

　　　　　　order:定义项目的排列顺序,数值越小,排列越靠前,默认为0

　　　　　　flex-grow:定义项目的放大比例,默认为0,即如果存在剩余空间也不放大,如果都为1,则他们将等分剩余空间.如果一个为2,其他为1,则前者占据的剩余空间比其他

　　　　　　　　　　　　多一倍

　　　　　　flex-shrink:定义项目的缩小比例,默认为1,即如果空间不足,项目将缩小.如果都为1,等比缩小,如果一个为0,其他为1,则前者不缩小,负值无效

　　　　　　flex-basis:定义在分配多余空间之前,项目占据的主轴空间,浏览器将根据这个属性,计算主轴是否有多余空间,它的默认值为auto,即项目本来大小,也可以设置

　　　　　　　　　　　　固定空间,即width和height

　　　　　　flex:是flex-grow,flex-shrink,flex-basis的简写,默认为0 1 auto ,后两个属性可选,该属性有快捷值,auto (1 1 auto) 和none (0 0 auto)

　　　　　　align-self:允许单个项目与其他项目不一样的对齐方式,可覆盖align-items 属性,默认值为auto,表示继承父元素的align-items属性,没有父元素则等

　　　　　　　　　　　　同于stretch

　　　　　　图片的属性:

　　　　　　resizeMode

cover:cover会被截断

strech:stretch模式图片被拉伸适应屏幕

contain:contain 模式容器完全容纳图片，图片自适应宽高

4.绝对定位与相对定位

　　　　不用在父容器中设置absolute或者relative,直接是相对于父容器定位

　　　　参照这篇博客

　　　　RN布局篇

码农公寓

相关文章