ReactNative FlexBox布局

编程之家收集整理的这篇文章主要介绍了ReactNative FlexBox布局编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

FlexBox布局

在React Native中布局采用的是FleBox(弹性框)进行布局

FlexBox提供了在不同尺寸设备上都能保持一致的布局方式。
FlexBox是CSS3弹性框布局规范,目前还处于最终征求意见稿 (Last Call Working Draft)阶段,并不是所有的浏览器都支持FlexBox。但大家在做React Native开发时大可不必担心FlexBox的兼容性问题,因为既然React Native选择用FlexBox布局,那么React Native对FlexBox支持自然会做的很好。

在React Native中尺寸是没有单位的
  • 在 Android 上 View 的长和宽的单位是 dp,字体单位 sp
  • 在 iOS 上 单位是 pt

布局

父视图属性(容器属性):

  • flexDirection enum(‘row’,‘column’,’row-reverse’,’column-reverse’)
  • flexWrap enum(‘wrap’,‘nowrap’)
  • justifyContent enum(‘flex-start’,‘flex-end’,‘center’,‘space-between’,‘space-around’)
  • alignItems enum(‘flex-start’,‘stretch’)

flexDirection

  • flexDirection属性定义了父视图中的子元素沿横轴或侧轴方片的排列方式。
  • row: 从左向右依次排列
  • row-reverse: 从右向左依次排列
  • column(default): 默认的排列方式,从上向下排列
  • column-reverse: 从下向上排列
    • 这里写图片描述

@H_502_74@flexWrap
  • flexWrap enum(‘wrap’,‘nowrap’)
  • flexWrap: 属性定义了子元素在父视图内是否允许多行排列,默认为nowrap。
  • nowrap: flex的元素只排列在一行上,可能导致溢出。
  • wrap: flex的元素在一行排列不下时,就进行多行排列

    这里写图片描述

justifyContent

  • justifyContent enum(‘flex-start’,‘space-around’)
  • justifyContent: 属性定义了浏览器如何分配顺着父容器主轴的弹性(flex)元素之间及其周围的空间,默认为flex-start。
  • flex-start(default): 从行首开始排列。每行第一个弹性元素与行首对齐,同时所有后续的弹性元素与前一个对齐。
  • flex-end: 从行尾开始排列。每行最后一个弹性元素与行尾对齐,其他元素将与后一个对齐。
  • center: 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
  • space-between: 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐,每行最后一个元素与行尾对齐。
  • space-around: 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

    这里写图片描述

alignItems

  • alignItems: enum(‘flex-start’,‘stretch’)
  • alignItems: 属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐,默认为stretch。
  • flex-start: 元素向侧轴起点对齐。
  • flex-end: 元素向侧轴终点对齐。
  • center: 元素在侧轴居中。如果元素在侧轴上的高度高于其容器,那么在两个方向上溢出距离相同。
  • stretch: 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。

    这里写图片描述

子视图属性

  • alignSelf: enum(‘auto’,‘flex-start’,‘stretch’)
  • flex: number

alignSelf

  • alignSelf: enum(‘auto’,‘stretch’)
  • alignSelf: 属性属性定义了flex容器内被选中项目的对齐方式。注意:alignSelf 属性可重写灵活容器的 alignItems 属性
  • auto(default): 元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。
  • stretch: 元素被拉伸以适应容器。
  • center: 元素位于容器的中心。
  • flex-start: 元素位于容器的开头。
  • flex-end: 元素位于容器的结尾。

    这里写图片描述

flex

  • flex: number
  • flex: 属性定义了一个可伸缩元素的能力,默认为0。在同一个view下,若每一个都配置 flex,样式就是等比例划分,若只一个Views配置,那其他空间将被此view 占用

其他布局

边框

边大小(宽度)

  • borderBottomWidth: number 底部边框宽度
  • borderLeftWidth: number 左边框宽度
  • borderRightWidth: number 右边框宽度
  • borderTopWidth: number 顶部边框宽度
  • borderWidth: number 边框宽度

边颜色

  • borderBottomColor: number 底部边框颜色宽度
  • borderLeftColor: number 左边框颜色
  • borderRightColor: number 右边框颜色
  • borderTopColor: number 顶部边框颜色
  • borderColor: number 边框颜色

大小

  • width: number 宽
  • height: number 高

外边距

  • margin: number 外边距
  • marginBottom: number 下外边距
  • marginHorizontal: number 左右外边距
  • marginLeft: number 左外边距
  • marginRight: number 右外边距
  • marginTop: number 上外边距
  • marginVertical: number 上下外边距

内边距

  • padding: number 内边距
  • paddingBottom: number 下内边距
  • paddingHorizontal: number 左右内边距
  • paddingLeft: number 做内边距
  • paddingRight: number 右内边距
  • paddingTop: number 上内边距
  • paddingVertical: number 上下内边距

定位(position)

  • position: enum(‘absolute’,‘relative’)属性设置元素的定位方式,为将要定位的元素定义定位规则。
  • relative: 生成相对定位的元素,相对于其正常位置进行定位。因此,”left:20” 会向元素的 LEFT 位置添加 20 像素。
  • absolute: 生成绝对定位的元素,元素的位置通过 “left”,“top”,“right” 以及 “bottom” 属性进行规定。
    • left: number 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
    • right: number 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移
    • top: number 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
    • bottom: number 属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
React Native中的FlexBox 和Web CSSS上FlexBox的不同之处
  • flexDirection: React Native中默认为flexDirection:’column’,在Web CSS中默认为flex-direction:’row’
  • alignItems: React Native中默认为alignItems:’stretch’,在Web CSS中默认align-items:’flex-start’
  • flex: 相比Web CSS的flex接受多参数,如:flex: 2 2 10%;,但在 React Native中flex只接受一个参数
  • 不支持属性:align-content,flex-basis,order,flex-basis,flex-flow,flex-grow,flex-shrink

参考

A Complete Guide to Flexbox
Using CSS flexible boxes
Layout with Flexbox
Layout Props

@H_436_404@

总结

以上是编程之家为你收集整理的ReactNative FlexBox布局全部内容,希望文章能够帮你解决ReactNative FlexBox布局所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的Flex相关文章

获取网络发布的webservice wsdl: http://www.flash-mx.com/ws/months.cfc?wsdl   GetMonths.mxml   <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"         layout="
在开发四国军棋的游戏中,通过 flex联机游戏开发- 四国军棋游戏(五)-提炼棋类开发api,我们提炼出了第一个关于棋类游戏开发的api-FlexChessAPI,这个api设计的方针就是基于状态机与事件驱动的flex主要机制,使开发工作简洁易行。现在,我们第一次使用这个api来开发一款中国象棋游戏,对一个成熟的开发工作者来说,我相信,你大概只需要半天时间就可以让这个象棋游戏运作起来。 现在,我们
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="#FFFFFF" applicationComplete="registerGlobalKeyHandler()">
flex4 beta发布了,它是自flex3以来的重大改革。flex4 beta 提供了一种新的组件和皮肤的架构。作为一个flex3的开发者,当你用flex4 beta编译你的flex3应用时你应该不会遇到太大的挑战,因为flex4 beta的一个目标就是保持与flex3的兼容。在这篇文章里我会提供关于flex4 beta主体带的一个大概的浏览,介绍一下Flex3到Flex4架构上的区别,以及在组
一 超酷皮肤主题推荐: 1. kingnarestyle: 下载地址:http://code.google.com/p/kingnarestyle/ 2.Carbon: 下载地址:http://www.fillcolors.com/post.cfm/carbon 3.Aqua: 下载地址:http://www.fillcolors.com/post.cfm/aqua 4.Rainbow: 下载地址
      昨天下载了一个新版本flex 4.1 sdk 包含升级adobe air 2.0 的版本的sdk ,当我换成了这个版本sdk 发现当存在文本的时候,垂直的布局方式存在一些差异。4.0版本则没有事情。不知道究竟发生了什么事情?做了一个简单的实验。看看差别究竟在哪里?    但是反而在同学间又没有这样的问题存在,十分究竟。记录一下。   <s:Group> <s:Grou
     类成员有四种修饰符: public  internal  dynamic(实现运行时添加类和属性的方法  dynamic class Foo)和final。 类成员可以有:public ,private, internal, protected     as文件的组织结构: package 中包含一个和文件名相同的public类,在package外有几个不是public的类,作为辅助类
还原问题:   request.setCharacterEncoding("UTF-8");   response.setContentType("text/html;charset=UTF-8");   request.setCharacterEncoding("UTF-8");       response.getOutputStream().println("中文");     java.i
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注