React Native布局篇

最新推荐文章于 2025-05-13 11:13:24 发布

原创最新推荐文章于 2025-05-13 11:13:24 发布 · 4.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#native #布局 #ui

react native 学习笔记专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨React Native的基础布局技术，包括坐标系布局、约束布局和弹性布局。通过分析padding、margin和position属性，阐述它们在UI设计中的作用。同时，重点讲解了flex布局在APP开发中的优势，特别是在内容自适应和灵活性上的表现。

1 基础类view的样式参数分类

基础类view的样式参数主要是负责UI布局，进行UI布局有多种技术方案，各自的思想和应用场景也不尽相同：有最常见的坐标系布局［对应下文1.4］、有类似IOS中constraint布局[对应下文1.1~1.2]、有web中使用的弹性布局[对应下文1.3].

1.1 padding

padding number 

paddingBottom number 

paddingHorizontal number 

paddingLeft number 

paddingRight number 

paddingTop number 

paddingVertical number

1.2 margin

margin number 

marginBottom number 

marginHorizontal number 

marginLeft number 

marginRight number 

marginTop number 

marginVertical number

1.3 flex

flex number 

flexDirection enum('row', 'column') 

flexWrap enum('wrap', 'nowrap') 

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

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

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

1.4 坐标

position enum('absolute', 'relative') 

bottom number 

height number 

left number 

right number 

top number 

width number

1.5 border

borderBottomWidth number 

borderLeftWidth number 

borderRightWidth number 

borderTopWidth number 

borderWidth number

2 不同分类的作用

2.1 使用padding 和 margin进行UI布局

padding是内边距；margin是外边距。下图为例，黄色为初始view，添加了border后，扩展了蓝色的边框，添加了外边距后，标明了与周围环境其他空间的坐标关系；添加了内边距后，最终成了content的区域。所以最后实际显示的是content。

这里写图片描述

2.2 使用坐标进行UI布局

这部分内容比较好理解，绝对坐标(position :’absolute’)的坐标原点是屏幕的左上角，这个与IOS的坐标系相同;相对坐标(position: ‘relative’)的坐标原点是屏幕的中心。

这里写图片描述

2.3 使用flex进行UI布局

flex布局原本就是适合在web里使用到的UI布局方案，因为桌面浏览器可以容纳的内容很多、显示的样式、页面容器的大小可变等特点，因此flex方案的布局更适用，但是在APP开发中必经因为屏幕有限，显示的内容也是有限的，在一些需要灵活化的场景中使用flex可以事半功倍，比如图片的流式浏览、不同大小的view的自适应等。具体用法可参考Flex 布局教程