混合開發的大趨勢之一React Native（對齊方式）

轉載請注明出處：王亟亟的大牛之路

先安利：https://github.com/ddwhan0123/Useful-Open-Source-Android

今天到新公司捯饬了一天，各類流程有點小小的麻煩，應該這幾天無法投産了，下午就找到時間繼續學習React Native，昨天講了個“權重”的概念，今天繼續研習布局這一塊

昨天提到的

flex

有小夥看的不太了解，這邊再解釋下

還是拿昨天的CSS的例子講一下

const styles=StyleSheet.create({
    container:{
        flex: ,
        justifyContent: 'center',
        alignItems: 'center',
    },style2:{
        backgroundColor: '#EEFCAF',
        flex: ,
    },style3:{
        backgroundColor: '#F5FCFF',
        flex: ,
    }
});
           

我們的父控件 的flex值 為 1

然後 他有的2個子控件分别是2，和3

那對于整個螢幕而言隻有一個”root layout”,裡面2個子View ，把root layout拆成了5份，他們2：3開拆分了整個視圖

這麼說了解了嗎？

接下來再說下 alignSelf屬性

align-self 屬性規定靈活容器内被選中項目的對齊方式。

auto    預設值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"。

stretch 元素被拉伸以适應容器。 

center  元素位于容器的中心。  

flex-start  元素位于容器的開頭。  

flex-end    元素位于容器的結尾。  

baseline    元素位于容器的基線上。 

initial 設定該屬性為它的預設值。

inherit 從父元素繼承該屬性。
           

參考位址：http://www.ziqiangxuetang.com/cssref/css3-pr-align-self.html

我們把昨天的代碼再改一改

我們搞 4個 Text 進去

class WjjPro extends Component {
    render(){
        return(
        <View style={styles.style1}>

        <View style={[styles.style2,]}>
            <Text>
                預設位置
            </Text>
        </View>

        <View style={[styles.style2,styles.style3]}>
            <Text>
                中間
            </Text>
        </View>

        <View style={[styles.style2,styles.style4]}>
            <Text>
                最左邊
            </Text>
        </View>

        <View style={[styles.style2,styles.style5]}>
            <Text>
                最右邊
            </Text>
        </View>

        </View>
        );
    }

}
           

然後調用不同的css

const styles=StyleSheet.create({
style1:{
    flex: ,
    borderWidth: ,
    },
style2:{
    borderColor: 'blue',
    borderWidth: ,
    width: ,
    height: ,
    },
style3:{
    width: ,
    height: ,
    alignSelf:'center',
    },
style4:{
    width: ,
    height: ,
    alignSelf:'flex-start',
    },
style5:{
    width: ,
    height: ,
    alignSelf:'flex-end',
    },

});
           

這部分就沒有權重的問題了，就依次排下來，然後按照指定的長寬呈現就好

效果如下

類似于Android 的相對布局

源碼位址：https://github.com/ddwhan0123/ReactNativeDemo

下載下傳位址：https://github.com/ddwhan0123/ReactNativeDemo/archive/master.zip