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个单位
1 2 3 4 5 6 7 | box:{ width : 50 , height : 50 , backgroundColor: '#f00' ,//红色 position : 'absolute' , left : 30 ,//左边距离屏幕左侧 30 单位 } |
获取当前屏幕宽、高
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | import { Dimensions } from 'react-native' ; var { width, height, scale } = Dimensions.get( 'window' ); render() { return ( <View> <Text> 屏幕的宽度:{width + '\n' } 屏幕的高度:{height + '\n' } </Text> </View> ); } |
关注下面二维码,订阅更多精彩内容。

分类:
reactnative
标签:
ReactNative
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 易语言 —— 开山篇
· 实操Deepseek接入个人知识库
· Trae初体验
2011-09-26 iBatis for net 框架使用
2011-09-26 iBatis for Net 代码生成器(CodeHelper)附下载地址(已经升级为V 1.1)