内容简介:在开发中,flex布局用的非常频繁,每次使用的时候都编写自己私有的flex样式会比较麻烦。当然了,因为react-native开发中样式也是一个对象,可以预设一些常用的flex样式, 使用的时候直接用即可。在开发过程中,当我编写父容器的时候,其实我已经知道自己希望的,里面子容器布局是怎样的,比如我希望flex1布局下,里面的子容器沿着横轴上下左右居中,于是我会写下
开发遇到
在开发中,flex布局用的非常频繁,每次使用的时候都编写自己私有的flex样式会比较麻烦。当然了,因为react-native开发中样式也是一个对象,可以预设一些常用的flex样式, 使用的时候直接用即可。
怎么方便一点
在开发过程中,当我编写父容器的时候,其实我已经知道自己希望的,里面子容器布局是怎样的,比如
<View style={styles.flex1}> <View>A</View> <View>B</View> </View> 复制代码
我希望flex1布局下,里面的子容器沿着横轴上下左右居中,于是我会写下
... flex1: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center' } ... 复制代码
那么问题来了,我已经很好的理解了flex中父容器各个属性的用法,我想跟着我的思路写样式名,就能出来我要的布局,不需要重新预定义类似flex1这样的样式,那不是挺好的,问题是怎么优化一下?
脚本生成所有组合
我自己定好一个规则,如果我写下面这样
<View style={styles.flex_row_center_center}> </View> 复制代码
意味着我要的是横向为主轴,主轴、侧轴居中
<View style={styles.flex_row_between_center}> </View> 复制代码
意味着我要的是横向为主轴,主轴左右对其,侧轴居中
......
即 flex_方向_主轴_侧轴
按着这个思路,把flexDirection、justifyContent、alignItems在react-native有效的属性值列出来
flex-direction: ['row', 'column'] justifyContent: ['center', 'space-between', 'space-around', 'flex-start', 'flex-end', 'space-evenly'] alignItems: ['start', 'end', 'center', 'baseline', 'stretch', 'between', 'around'] 复制代码
通过一个脚本生成一个类似下面这样的对象
{ flex_row_center_center: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }, ... } 复制代码
const getFlexLayoutStyles = () => { /* flex_方向_主轴_侧轴 */ // space-evenly flex容器起始边缘和第一个 flex 项之间的间距和每个相邻 flex 项之间的间距是相等 const DIRECTIONS = ['row', 'column'], JUSTIFY_CONTENT_PROPVALUES = ['center', 'space-between', 'space-around', 'flex-start', 'flex-end', 'space-evenly'], JUSTIFY_CONTENT_NAMEVALUES = ['center', 'between', 'around', 'start', 'end', 'evenly'], ALIGN_ITEMMS_PROPVALUES = ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'], ALIGN_ITEMMS_NAMEVALUES = ['start', 'end', 'center', 'baseline', 'stretch', 'between', 'around'] DIVISION = '_' layoutStyles = {}; let styleName = 'flex' DIRECTIONS.forEach((direction) => { // flex_row const nameDir = styleName + DIVISION + direction JUSTIFY_CONTENT_PROPVALUES.forEach((jItem, jIdx) => { // flex_row_center const nameJust = nameDir + DIVISION + JUSTIFY_CONTENT_NAMEVALUES[jIdx] ALIGN_ITEMMS_PROPVALUES.forEach((aItem, aIdx) => { // flex_row_center_center const nameAlig = nameJust + DIVISION + ALIGN_ITEMMS_NAMEVALUES[aIdx] layoutStyles[nameAlig] = { flexDirection: direction, justifyContent: jItem, alignItems: aItem } }) }) }) console.log('layoutStyles', layoutStyles) return layoutStyles } 复制代码
最后打印出来看看layoutStyles是否是我们需要的
总共60条数据
遍历所有组合并渲染
... { Object.keys(getFlexLayoutStyles()).map((o, i) => ( <View style={[styles.demoBox, styles[o], {position: 'relative'} ]} key={i}> <Text style={{ position: 'absolute', color: '#fff', left: 0, top: 0, zIndex: 20}}>{ i + 1 }. {o}</Text> <View style={[styles.demoItemA,(o.indexOf('stretch') != -1 && o.indexOf('row') != -1) && {height: 'auto'},(o.indexOf('stretch') != -1 && o.indexOf('column') != -1) && {width: 'auto'}, (o.indexOf('baseline') != -1 && o.indexOf('row') != -1) && {height: 80}, (o.indexOf('baseline') != -1 && o.indexOf('column') != -1) && {width: 80}]}> {o.indexOf('baseline') != -1 && (<Text style={{color: '#fff'}, o.indexOf('row') != -1 && {marginTop: 20}}>text</Text>)} </View> <View style={[styles.demoItemB,(o.indexOf('stretch') != -1 && o.indexOf('row') != -1) && {height: 'auto'},(o.indexOf('stretch') != -1 && o.indexOf('column') != -1) && {width: 'auto'}]}> {o.indexOf('baseline') != -1 && (<Text style={{color: '#fff'}}>text</Text>)} </View> </View> )) } ... 复制代码
其中,对于子容器的属性,可以自己根据需要添加即可,譬如,上面的代码中,stretch的情况下,判断出来,需要把子容器原来固定宽高的值,改为'auto',最后看到拉伸填充整个父容器的效果。
space-evenly
一眼看过去跟,space-around方式很像,仔细看,其实这个的特点是,灰色的区域三等份,开发中很多时候需要这种效果。
baseline
很像什么flex-start的效果,其实这个的特点是以'text'第一个文本为基准对其。 如果没有文本,那效果看起来跟flex-start是一样的。
alignSelf
上面三个栗子,父容器的布局都是flex_row_center_center, 然而对于黑色框的子容器分别设置了alignSelf
# 1 {alignSelf: 'flex-start'} # 2 {alignSelf: 'flex-end'} # 3 {alignSelf: 'stretch'} 复制代码
可以这样理解,alignSelf会覆盖,父容器设置的alignItems走向
理解了这一点,那纵向为主轴也是一个意思, 看下图
以上所述就是小编给大家介绍的《70个react-native flex布局栗子,肯定有你要的》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 这些vue技巧你肯定不知道
- 不吹不黑,这个算法,你肯定不会
- 有了这些你们团队的代码肯定规范
- 一份坚持、一份肯定、一份前行
- 这样做源码肯定不能被泄露,但你会疯...
- 这些Python代码技巧,你肯定还不知道
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。