混合开发的大趋势之一React Native对齐方式

转载请注明出处：王亟亟的大牛之路

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

今天到新公司捯饬了一天，各类流程有点小小的麻烦，应该这几天无法投产了，下午就找到时间继续学习React Native，昨天讲了个“权重”的概念，今天继续研习布局这一块

昨天提到的 flex 有小伙看的不太理解，这边再解释下

还是拿昨天的CSS的例子讲一下

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

我们的父控件 的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: 1,borderWidth: 1,style2:{ borderColor: 'blue',width: 70,height: 20,style3:{ width: 50,height: 50,alignSelf:'center',style4:{ width: 50,height: 30,alignSelf:'flex-start',style5:{ width: 50,height: 25,alignSelf:'flex-end',});

这部分就没有权重的问题了，就依次排下来，然后按照指定的长宽呈现就好

效果如下

类似于Android 的相对布局

源码地址：https://github.com/ddwhan0123/ReactNativeDemo

下载地址：https://github.com/ddwhan0123/ReactNativeDemo/archive/master.zip