React Native之Flexbox

---

1. flexDirection

flexDirection决定布局的主轴，值为row时，子元素沿着水平方向排列，值为column时，子元素沿着竖直轴方向排列。
示例代码如下：

import React, {Component} from 'react'

import {
    StyleSheet,
    View,
} from 'react-native'

export default class LotsOfStyles extends Component {
    static navigationOptions = {
        // title: 'page 1',
        title: 'Flexbox布局',
    };

    render() {
        return (
            
                
                
                
            
        );
    }
}

效果如下：

当flexDirection为cloumn时，效果如下：

flexDirection为cloumn

2. justifyContent

在style中justifyContent可以决定其子元素沿着主轴的排列方式。对应的值可以有flex-start、center、flex-end、space-around、space-between以及space-evenly。

• 为space-between时，

import React, {Component} from 'react'

import {
    StyleSheet,
    View,
} from 'react-native'

export default class LotsOfStyles extends Component {
    static navigationOptions = {
        // title: 'page 1',
        title: 'Flexbox布局',
    };

    render() {
        return (
            
                
                
                
            
        );
    }
}

效果图：

space-between

• 为center时，
  效果图：

  
  
  

  center

• 为flex-start时，
  效果图：

  
  
  

  flex-start

• 为flex-end时，
  效果图：

  
  
  

  flex-end

• 为space-around时，

  
  
  

  space-around

• 为space-evenly时，

  
  
  

  space-evenly

3. alignItems

在style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴为row，则次轴方向为column）的排列方式。对应的值可以有flex-start、center、flex-end、stretch。

• 为stretch时，

import React, {Component} from 'react'

import {
    StyleSheet,
    View,
} from 'react-native'

export default class LotsOfStyles extends Component {
    static navigationOptions = {
        // title: 'page 1',
        title: 'Flexbox布局',
    };

    render() {
        return (
            
                
                
                
            
        );
    }
}

注：stretch生效的话，子元素在次轴方向上不能有固定的尺寸。

stretch

• flexDirection为row,justifyContent为center，alignItems为center时
  效果图为：

  
  
  

关于这三个样式，还是需要我们多练习才能找到规律，多做一些组合的练习，就能完全掌握。