使用Flexbox布局

Flexbox规则可以用来指定某个组件的子元素的布局，在不同的屏幕上提供一致的布局结构

Flex

flex决定在主轴上如何填满可用区域。整个区域会根据每个元素设置的flex属性值被分隔成多个部分

....

const flex = ()=>{
    return (
        <View style={[styles.container,{flexDirection:"column"}]}>
            <View style={{flex:1,backgroundcolor:"red"}}/>
            <View style={{flex:2,backgroundcolor:"orange"}}/>
            <View style={{flex:3,backgroundcolor:"green"}}/>
        
        </View>
        
    );

};


const styles = StyleSheet.create({
    container:{
        flex:1,
        padding:20
    }
});

Flex Direction

flexDirection可以决定布局的主轴，默认值 column(竖轴) row（水平轴）

direction

direction：布局顺序 ltr(从左到右) rtl(从右到左)

justifyContent

justifyContent：布局对齐：flex-start、center(居中)、flex-end、space-around(组件之间间隔一致) space-between（组件之间距离相等，第一个组件之前以及最后一个组件之后不留空间）

alignItems

alignItems : 和justifyContent配合视同 alignItems是侧轴布局 justifyContent是主轴布局。 flex-start,flex-end, center,stretch,baseline

alignSelf

与alignItem类似是子组件设置自身的侧轴布局位置

alignContent

与alignItem一致，对多行item有效。而alignItem对单行和多行都有效

flexWrap

设置填满屏幕时是否强制换行 wrap 会换行 no-wrap不会换行，强制一行

Flex Basic，Grow,Shrink

Basic 与 width类似可以设置为auto Grow 当父空间较大时，内部组件按照Grow设置拉伸比例 Shrink当空间不够用时，内部组件按照Shrink设置压缩比例

React Native学习（三） 布局