通过此篇笔记能够学习到如下的几个知识点
- 在 React Native 中使用样式的一些细节
- 了解 React Native 的 Flex 布局概念
- 了解 React Native 的 flex 布局属性
- React Native 如何添加多样式属性
- React Native 中绝对布局和相对布局
React Native 中的 Flex 布局概念
1、主轴和交叉轴
在 Flex 布局中存在主轴和交叉轴的概念,主轴和交叉轴的关系如同 X 轴和 Y 轴的关系。在 Flex 布局中是使用 flexDirection
来定义主轴和交叉轴的方向。
- flexDirection:
row
|row-reverse
|column
|column-reverse
当 flexDirection 的值为row
或者row-reverse
时,主轴和交叉轴的关系如下图:
当 flexDirection 的值为 column
或者 column-reverse
时,主轴和交叉轴的关系如下图:
2、x-reverse 属性说明
当 flexDirection 的属性值为row-reverse
时,元素的排列表顺序是从右到左的顺序依次排序。
当 flexDirection 的属性值为column-reverse
时,元素的排列表顺序是从下到上的顺序依次排序。
Flex 容器对齐方式
Flex 容器中的元素对齐是跟主轴和交叉轴有关。其中 alignItems
属性主要是在交叉轴上对齐,而 justifyContent
属性主要是在主轴上对齐。
-
justifyContent
控制主轴(横轴)上所有 flex 项目的对齐。(以下实例都是按照flexDirection: 'row'
为基础来设置参数)-
flex-start
flex 项目的开始端的对齐
具体布局实例如下:
-
flex-end
flex 项目的结束端对齐
具体布局实例如下:
-
center
flex 项目居中对齐
具体布局实例如下:
-
space-between
flex 项目两端对齐且项目间隔均等(左右两端无空隙)
具体布局实例如下:
-
-
space-around
flex 项目间隔均等分
具体布局实例如下:
-
space-evenly
flex 项目间隔均等分,此属性与 space-around 的不同之处是在于,此值是所有空间都是均等的,而 spance-around 左右两端并不是空间均等而是元素的一半
具体布局实例如下:
-
alignItems
控制交叉轴(纵轴)上所有 flex 项目的对齐。(以下实例都是按照flexDirection: 'column'
为基础来设置参数)基础样式代码:
container: { flexDirection: 'column', alignItems: '' }, card: { height: 100, marginHorizontal: 8, borderRadius: 5, justifyContent: 'center', alignItems: 'center', }, cardOne: { width: 100, backgroundColor: '#EF5354' }, cardTwo: { width: 100, backgroundColor: '#50DBB4' }, cardThree: { width: 'auto', backgroundColor: '#5DA3FA' }, textWhite: { color: '#FFFFFF' }
-
flex-start
flex 项目的开始端的对齐
具体布局实例如下:
-
flex-end
flex 项目的结束端对齐
具体布局实例如下:
-
center
flex 项目居中对齐
具体布局实例如下:
-
stretch
flex 项目撑满 flex 容器,当元素设置了高度后,元素的高度只会按照设置的高度来 -
baseline
flex 项目的基线对齐
具体布局实例如下:
-
-
alignSelf
控制交叉轴(纵轴)上的单个 flex 项目的对齐。此属性设置在子元素上才会有效果。属性值跟 align-items 一样。 -
alignContent
控制“多条主轴”的 flex 项目在交叉轴的对齐。属性值与 justifyContent 一样。
Flex 容器排序设置
-
flexWrap:设置 Flex 容器的子元素总宽度大于 Flex 容器的宽度时子元素的呈现方式。取值有
nowrap
、wrap
、wrap-reverse
。-
nowrap
当子元素总宽度超出时溢出容器 -
wrap
当子元素总宽度超出时元素会折行并且从左到右排序,具体实例如下:
-
Flex 子元素大小设置
-
flexGrow:设置子元素所占容器的比例
等分所有元素实例:
container: { flexDirection: 'row' }, card: { flexGrow: 1, height: 100, margin: 8, borderRadius: 5, justifyContent: 'center', alignItems: 'center', },
12 栏切分为 3、3、6 的比例:
container: { flexDirection: 'row' }, card: { height: 100, margin: 8, borderRadius: 5, justifyContent: 'center', alignItems: 'center', },
-
flexBasis:为元素设置最小宽度,当父子元素都设置了此属性,子元素的优先级最高。
为元素设置最小宽度为 60:
card: { height: 100, margin: 8, flexBasis: 60, borderRadius: 5, justifyContent: 'center', alignItems: 'center', },
-
flexShrink:元素的收缩比例,数值越大的话,收缩的比例越大。具体实例如下:
card: { height: 100, margin: 8, borderRadius: 5, justifyContent: 'center', alignItems: 'center', }, cardOne: { flexBasis: 'auto', backgroundColor: '#EF5354', flexShrink: 0 }, cardTwo: { flexBasis: 300, backgroundColor: '#50DBB4', flexShrink: 13 }, cardThree: { flexBasis: 300, backgroundColor: '#5DA3FA', flexShrink: 55 },
Flex 行间距和列间距
在 Flex 中间距的设置主要是通过如下三个属性来设置:
- rowGap 设置元素行之间的间隙
- columnGap 设置元素列之间的间隙
- gap 设置元素行/列之间的间隙
具体实例如下:
container: {
flexDirection: 'row',
rowGap: 8,
columnGap: 8
},
card: {
flex: 1,
height: 100,
borderRadius: 5,
justifyContent: 'center',
alignItems: 'center',
},
cardOne: {
backgroundColor: '#EF5354',
},
cardTwo: {
backgroundColor: '#50DBB4',
},
cardThree: {
backgroundColor: '#5DA3FA',
},
绝对定位和相对定位
position
属性类型定义了它在其父元素中的定位方式。
- relative(默认值)默认情况下,元素是相对定位的。top 这意味着元素根据布局的正常流程定位,然后根据、right、bottom 和的值相对于该位置进行偏移 left。偏移量不会影响任何同级或父元素的位置。具体实例如下:
card: {
width: 100,
height: 100,
borderRadius: 5,
justifyContent: 'center',
alignItems: 'center',
},
cardOne: {
backgroundColor: '#EF5354',
top: 20,
left: 20
},
cardTwo: {
backgroundColor: '#50DBB4',
top: 20,
left: 40
},
cardThree: {
backgroundColor: '#5DA3FA',
top: 20,
left: 60
},
textWhite: {
color: '#FFFFFF'
}
运行效果如下:文章来源:https://www.toymoban.com/news/detail-640872.html
- absolute 当绝对定位时,元素不会参与正常的布局流程。相反,它的布局独立于其兄弟姐妹。该位置是根据 top、right、bottom 和 left 值确定的。具体实例如下:
cardOne: {
backgroundColor: '#EF5354',
position: 'absolute',
top: 20,
left: 20
},
cardTwo: {
backgroundColor: '#50DBB4',
position: 'absolute',
top: 30,
left: 40
},
cardThree: {
backgroundColor: '#5DA3FA',
position: 'absolute',
top: 40,
left: 60
},
具体效果如下:文章来源地址https://www.toymoban.com/news/detail-640872.html
到了这里,关于React Native 样式布局基础知识的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!