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~~!

掃碼關注我的微信訂閱號