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是否是我们需要的

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

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

flex值

有5个容器，分别设为

flex: 1
flex: 2
flex: 1
flex: 2
flex: 1

父容器会把自己分为7等份，1，3，5占1份，2，4占2份

源码

flex布局GITHUB代码

欢迎start, 3Q~~!