上海市住房城乡建设部网站,小程序平台取名,做设计最好的参考网站,百度网页版入口在线登录通过此篇笔记能够学习到如下的几个知识点
在 React Native 中使用样式的一些细节了解 React Native 的 Flex 布局概念了解 React Native 的 flex 布局属性React Native 如何添加多样式属性React Native 中绝对布局和相对布局
React Native 中的 Flex 布局概念
1、主轴和交叉…通过此篇笔记能够学习到如下的几个知识点
在 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
}运行效果如下
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
},具体效果如下
