React Native中的FlexBox布局

React Native通過一個基于FlexBox的布局引擎，在所有移動平台上實作了一緻的跨平台樣式和布局方案。

FlexBox布局目前支援的屬性有如下6個：

（1）flex

（2）flexDirection

（3）alignSelf

（4）alignItems

（5）justifyContent

（6）flexWrap

接下來，我們一個一個的看一下每個屬性的作用。

（1）flex屬性

當一個元素定義了flex屬性時，表示該元素是可伸縮的（flex的屬性值大于0的時候才可伸縮）。

var Demo = React.createClass({  
    render: function() {  
        return (  
            <View style={styles.style_0}>  
                <View style={styles.style_1}>  
                    <Text style={{marginTop:40, fontSize:25}}>1／4高</Text>  
                </View>  
                <View style={styles.style_1}>  
                    <Text style={{marginTop:40, fontSize:25}}>1／4高</Text>  
                </View>  
                <View style={{flex:10, borderWidth:1, borderColor:'red'}}>  
                    <Text style={{marginTop:40, fontSize:25}}>1／2高</Text>  
                </View>  
            </View>  
        );  
    }  
});  
var styles = StyleSheet.create({  
    style_0:{  
        flex: 1,  
    },  
    style_1:{  
        flex: 5,  
        height: 40,   
        borderWidth: 1,    
        borderColor: 'red',  
    }  
});             

複制

上面的代碼，最外層的View是可伸縮的，而且沒有兄弟節點和它搶占空間。内層的三個View的flex屬性值分别是5、5、10，是以，第一個View和第二個View分别占1 / 4的伸縮空間，最後一個View占1 / 2的伸縮空間。

（2）flexDirection

flexDirection在React Native中隻有兩個屬性值，row（橫向伸縮）和column（縱向伸縮）。

var Demo = React.createClass({  
    render: function() {  
        return (  
            <View style={styles.style_0}>  
                <View style={styles.style_1}>  
                    <Text style={{marginTop:40, fontSize:25}}>1／4高</Text>  
                    <Text style={{marginTop:40, fontSize:25}}>1／4高</Text>  
                </View>  
                <View style={[styles.style_1, {flexDirection:'column'}]}>  
                    <Text style={{marginTop:40, fontSize:25}}>1／4高</Text>  
                    <Text style={{marginTop:40, fontSize:25}}>1／4高</Text>  
                </View>  
                <View style={{flex:10, borderWidth:1, borderColor:'red'}}>  
                    <Text style={{marginTop:40, fontSize:25}}>1／2高</Text>  
                </View>  
            </View>  
        );  
    }  
});  
var styles = StyleSheet.create({  
    style_0:{  
        flex: 1,  
    },  
    style_1:{  
        flex: 5,  
        flexDirection: 'row',  
        height: 40,   
        borderWidth: 1,    
        borderColor: 'red',  
    }  
});             

複制

（3）alignSelf

alignSelf的對齊方式主要有四種：flex-start、flex-end、center、auto、stretch。

var Demo = React.createClass({  
    render: function() {  
        return (  
            <View style={styles.style_0}>  
                <View style={[styles.view]}>  
                    <Text>自由擺放</Text>  
                </View>  
                <View style={[styles.view, styles.center]}>  
                    <Text>居中擺放</Text>  
                </View>  
                <View style={[styles.view, styles.left]}>  
                    <Text>居左擺放</Text>  
                </View>  
                <View style={[styles.view, styles.right]}>  
                    <Text>居右擺放</Text>  
                </View>  
            </View>  
        );  
    }  
});  
var styles = StyleSheet.create({  
    style_0:{  
        flex: 1,  
        borderColor: 'red',  
        borderWidth: 1  
    },  
    view:{  
        borderWidth: 5,    
        borderColor: 'blue',  
        marginTop: 40,  
        width: 100,  
        height: 40  
    },  
    center:{  
        alignSelf: 'center'  
    },  
    left:{  
        alignSelf: 'flex-start'  
    },  
    right:{  
        alignSelf: 'flex-end'  
    }  
});           

複制

（4）alignItems

alignItems是alignSelf的變種，跟alignSelf的功能類似，可用于水準居中。justifyContent用于垂直居中。

var Demo = React.createClass({  
    render: function() {  
        return (  
            <View style={styles.style_0}>  
                <View style={[styles.view]}>  
                    <Text>居中擺放</Text>  
                </View>  
            </View>  
        );  
    }  
});  
var styles = StyleSheet.create({  
    style_0:{  
        flex: 1,  
        borderColor: 'red',  
        borderWidth: 1,  
        justifyContent: 'center',  
        alignItems: 'center'  
    },  
    view:{  
        borderWidth: 3,    
        borderColor: 'blue',  
        width: 100,  
        height: 50  
    }  
});  Q           

複制