混合开发的大趋势之一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