ReactNative布局样式总结

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>
  );
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GIS讲堂

OL3矢量图层样式自定义

1783
来自专栏超然的博客

Flex布局

Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

1481
来自专栏Scott_Mr 个人专栏

React Native 系列(四) -- 布局

3257
来自专栏cnblogs

Css3新特性应用之形状

一、自适应椭圆 * border-radius特性:     * 可以单独指定水平和垂直半径,并且值可以是百分比,用/(斜杠)分隔这两个值即可(可以实现自适应宽...

1819
来自专栏Android小菜鸡

自定义View学习之路(二)————Paint与Canvas

  Canvas可以理解为画布,配置好画笔后,我们可以调用Canvas的各种绘制方法。   绘制直线:canvas.drawLine(float startX...

1011
来自专栏上善若水

018android初级篇之自定义圆形进度条

项目需要,需要一个圆形的进度条,所想到的实现方案是这样的: 自定义View,订制一个圆形的进度条。下面简述实现,有不当之处敬请指正。

1135
来自专栏抠抠空间

css属性详解

一、字体属性 字体   font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识...

3069
来自专栏向治洪

css3动画从入门到精通

什么是css3动画? 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 CSS3带来了圆角,半透明...

4036
来自专栏Android开发指南

自定义圆环进度条

3996
来自专栏cnblogs

BOOtstrap源码分析之 tooltip、popover

一、tooltip(提示框) 源码文件: Tooltip.js Tooltip.scss 实现原理: 1、获取当前要显示tooltip的元素的定位信息(top...

3066

扫码关注云+社区

领取腾讯云代金券