flex number

用于设置或检索弹性盒模型对象的子元素如何分配空间

flexDirection enum('row', 'row-reverse' ,'column','column-reverse')

flexDirection属性决定主轴的方向,默认是“column”:

  • row:主轴为水平方向,起点在左端
  • row-reverse:主轴为水平方向,起点在右端
  • column(默认值):主轴为垂直方向,起点在上沿
  • column-reverse:主轴为垂直方向,起点在下沿

flexWrap enum('wrap', 'nowrap') 
轴线,wrap换行展示,nowrap不换行(可能会显示不全);

justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')

  • justifyContent属性定义了项目在主轴上的对齐方式
  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐,项目之间的间隔都相等
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍

alignItems enum('flex-start', 'flex-end', 'center', 'stretch')

  • align-items属性定义项目在交叉轴上如何对齐
  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')

alignSelf决定了元素在父元素的次轴方向的排列方式(此样式设置在子元素上),其值会覆盖父元素的alignItems的值。

图片相关
resizeMode enum('cover', 'contain', 'stretch')

  • cover:裁剪展示
  • stretch:拉伸展示
  • contain:原图展示

overflow enum('visible', 'hidden') 超出部分是否显示,hidden为隐藏
tintColor 着色,rgb字符串类型
opacity 透明度

边框宽度

  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • borderColor

边框颜色

  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • borderColor

外边距

  • marginBottom
  • marginLeft
  • marginRight
  • marginTop
  • marginVertical
  • marginHorizontal
  • margin

内边距

  • paddingBottom
  • paddingLeft
  • paddingRight
  • paddingTop
  • paddingVertical
  • paddingHorizontal
  • padding

边框圆角

  • borderTopLeftRadius
  • borderTopRightRadius
  • borderBottomLeftRadius
  • borderBottomRightRadius
  • borderRadius

阴影

  • shadowColor
  • shadowOffset
  • shadowOpacity
  • shadowRadius

布局
position

  • absolute
  • relative

left/top/right/bottom 距“左/上/右/下”N个单位

box:{
  width:50,
  height:50,
  backgroundColor:'#f00',//红色
  position :'absolute',
  left:30,//左边距离屏幕左侧30单位
}

获取当前屏幕宽、高

import { Dimensions } from 'react-native';

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

render() {
return (
<View>
<Text>
屏幕的宽度:{width + '\n'}
屏幕的高度:{height + '\n'}
</Text>
</View>
);
}

  

ReactNative布局样式总结的更多相关文章

  1. CSS3知识点整理(四)----布局样式及其他

    包括CSS3多列布局样式.Flexbox伸缩布局.盒子模型等.重点介绍了Flexbox伸缩布局的各种属性用法. 一.多列布局 为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给 ...

  2. Android开发工程师文集-Fragment,适配器,轮播图,ScrollView,Gallery 图片浏览器,Android常用布局样式

    Android开发工程师文集-Fragment,适配器,轮播图,ScrollView,Gallery 图片浏览器,Android常用布局样式 Fragment FragmentManager frag ...

  3. CSS(非布局样式)

    CSS(非布局样式) 问题1.CSS样式(选择器)的优先级 1.计算权重 2.!important 3.内联样式比外嵌样式高 4.后写的优先级高 问题2.雪碧图的作用 1.减少 HTTP 请求数,提高 ...

  4. 万能的TextView,实现常用布局样式

    package com.loaderman.textviewdemo; import android.content.Context; import android.content.res.Typed ...

  5. Android布局样式

    本篇介绍一下Android中的几种常用的布局,主要介绍内容有: ·View视图 ·LinearLayout ·RelativeLayout 在介绍布局之前,我们首先要了解视图View的基本属性,因为所 ...

  6. css进阶 01-CSS中的非布局样式

    01-CSS中的非布局样式 #前言 CSS中,有很多非布局样式,这些样式(属性)和与布局无关,包括: 字体.字重.颜色.大小.行高 背景.边框 滚动.换行 装饰性属性(粗体.斜体.下划线)等. 这篇文 ...

  7. react-native 布局基础

    宽度单位和像素密度 react的宽度不支持百分比,设置宽度时不需要带单位 {width: 10}, 那么10代表的具体宽度是多少呢? 不知道是官网文档不全还是我眼瞎,反正是没找到,那做一个实验自己找吧 ...

  8. css3 flex流动自适应响应式布局样式类

    1.再说css3 flex 一旦一个容器赋予了display:flex属性,将会有以下特点: 项目无法设置浮动. 列表的样式会被清除. 无法使用vertical-align设置垂直对齐方式. 目前互联 ...

  9. flex 4 布局样式

    Flex 4 样式与布局 第一篇 Flex 4 与自定义布局(Layout) Flex 4/Spark组件架构的新功能之一是可以定制一个容器的布局而不必改变容器本身.您需要做的就是定义一个自定义布局. ...

随机推荐

  1. 源码剖析Django REST framework的认证方式及自定义认证

    源码剖析Django REST framework的认证方式 在前面说过,请求到达REST framework的时候,会对request进行二次封装,在封装的过程中会对客户端发送过来的request封 ...

  2. Python案例分享

    1.过桥(爬金字塔): 1 i = 1 2 while i <= 9: 3 if i < 6: 4 j = 0 5 while j < i: 6 print('*',end=' ') ...

  3. app打包常用操作

    1.修改appId android:打开build.gradle文件 找到defaultConfig{applicationId 'ceshi'} 修改测试.android studio会提示. Gr ...

  4. dSYM文件分析

    什么是 dSYM 文件 Xcode编译项目后,我们会看到一个同名的 dSYM 文件,dSYM 是保存 16 进制函数地址映射信息的中转文件,我们调试的 symbols 都会包含在这个文件中,并且每次编 ...

  5. 记一次改造react脚手架的过程

    公司突然组织需要重新搭建一个基于node的论坛系统,前端采用react,上网找了一些脚手架,或多或少不能满足自己的需求,最终在基于YeoMan的react脚手架generator-react-webp ...

  6. webpack之深入浅出externals

    我们通常在做项目时可能会把第三方库打包到bundle中,比如下面这张图 如果不想把第三方库打包到bundle中,这就有了externals.官方的使用externals比较简单,只需三步-- 1.在H ...

  7. 【ElementUI】日期选择器时间选择范围限制

    ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充. 官方文档中使用picker-options属性来限制可选择的日期, ...

  8. robotframework文本类型的下拉框

    对于下拉框定位和输入,这里主要遇到有两种类型的下拉选择. 其中一个类型是select-options格式,如图 这种方式的定位可以使用select from list by value或select ...

  9. websocket介绍

    websocket应用 手动实现的websocket 你所见过的websocket 你一定见过在网站中,有一个游客聊天的聊天框,比如人人影视.这个聊天框是如何实现即时通讯的呢,就是用到了websock ...

  10. HDU 1014 Uniform Generator 欧几里得

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1014 解题思路: 1. 把题目意思读懂后,明白会输入两个数,然后根据题中的公式产生一系列伪随机数,看这 ...