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

ReactNative布局样式总结相关推荐

【RecyclerView】九、为 RecyclerView 设置不同的布局样式
文章目录一.为 RecyclerView 设置不同的布局样式二.完整代码三.RecyclerView 相关资料一.为 RecyclerView 设置不同的布局样式为 RecyclerView ...
div css网页设计源代码_HTML+CSS网页设计，企业网站服务项目布局样式
大家好,本篇文章分享企业网站服务项目的布局样式,这种布局样式通常用于企业网站首页,企业可以向客户提供的服务内容,不同类型的企业服务项目样式也不同,这只是其中一种. 效果图: 服务项目 HTML代码: ...
div css网页设计源代码_HTML+CSS网页设计，企业网站资讯文章布局样式
大家好,本篇文章分享企业网站资讯文章的布局样式,这种布局样式通常用于企业网站首页. 效果图: 资讯文章 HTML代码: 最新资讯 Newest information 高效简洁但稳定实用的网站程序20 ...
前端比较好用的一个Flex布局样式包
前端比较好用的一个Flex布局样式包 https://gitee.com/chendaiming/flex_layout
CSS非布局样式和重点内容
CSS基础非布局样式 Cascading Style Sheet 层叠 .样式.表可以简单理解为PS中图层的样式和叠加选择器 selecter{prop:value; } 选择器用于匹配HTML元 ...
html5弹性盒子的作用,flexbox弹性盒子，真正意义上的布局样式
前段时间接手了一个基于cef1的项目,由于其特别限定的场景,在查询了对html5的支持后,整站都采用了flexbox布局,也从头熟悉了一遍该布局的使用方法.故分享出来,供参考. 背景 Flexbox ...
【ReactNative】react-native 布局
react-native 布局 1 flex布局基本概念 flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.采用flex布局的元素,称为f ...
html卡片布局样式,基于bootstrap卡片图文列表布局样式
特效描述:基于bootstrap 卡片图文列表布局样式.bootstrap卡片图文列表布局代码是一款基于jQuery跟Bootstrap实现的3种列表布局样式代码. 代码结构 1. 引入CSS 2. ...
我的前端学习之CSS基础--选择器、字体、非布局样式、背景
CSS基础选择器半透明,可叠加,第一张的padding,第二张的font-size,第三张的background <style>body{padding :10px; font-siz ...

ReactNative布局样式总结

ReactNative布局样式总结相关推荐

最新文章

热门文章