70个react-native flex布局栗子,肯定有你要的

栏目: IOS · Android · 发布时间: 6年前

内容简介:在开发中,flex布局用的非常频繁,每次使用的时候都编写自己私有的flex样式会比较麻烦。当然了,因为react-native开发中样式也是一个对象,可以预设一些常用的flex样式, 使用的时候直接用即可。在开发过程中,当我编写父容器的时候,其实我已经知道自己希望的,里面子容器布局是怎样的,比如我希望flex1布局下,里面的子容器沿着横轴上下左右居中,于是我会写下
70个react-native flex布局栗子,肯定有你要的

开发遇到

在开发中,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是否是我们需要的

70个react-native flex布局栗子,肯定有你要的

总共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

70个react-native flex布局栗子,肯定有你要的

一眼看过去跟,space-around方式很像,仔细看,其实这个的特点是,灰色的区域三等份,开发中很多时候需要这种效果。

baseline

70个react-native flex布局栗子,肯定有你要的

很像什么flex-start的效果,其实这个的特点是以'text'第一个文本为基准对其。 如果没有文本,那效果看起来跟flex-start是一样的。

alignSelf

70个react-native flex布局栗子,肯定有你要的

上面三个栗子,父容器的布局都是flex_row_center_center, 然而对于黑色框的子容器分别设置了alignSelf

# 1
{alignSelf: 'flex-start'}
# 2
{alignSelf: 'flex-end'}
# 3
{alignSelf: 'stretch'}
复制代码

可以这样理解,alignSelf会覆盖,父容器设置的alignItems走向

理解了这一点,那纵向为主轴也是一个意思, 看下图

70个react-native flex布局栗子,肯定有你要的

以上所述就是小编给大家介绍的《70个react-native flex布局栗子,肯定有你要的》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

程序员2005精华本

程序员2005精华本

《程序员》杂志社 / 电子工业 / 2006-1 / 45.00元

本书为集结了《程序员》杂志与《msdn开发精选》杂志精华。分上、下两册,内容包括人物&报道、管理与实践、程序员手册、年鉴、《程序员》技术专题、《msdn开发精选》文章精选等。一起来看看 《程序员2005精华本》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

URL 编码/解码
URL 编码/解码

URL 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试