360SDN.COM

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

来源:  2017-06-19 20:52:26    评论:0点击:

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

先安利: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,
    }
});
  • 1

我们的父控件 的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 从父元素继承该属性。
  • 1
  • 2
  • 3
  • 4

参考地址: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>
        );
    }

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

然后调用不同的css

const styles=StyleSheet.create({
style1:{
    flex: 1,
    borderWidth: 1,
    },
style2:{
    borderColor: 'blue',
    borderWidth: 1,
    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',
    },

});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

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

效果如下

 

类似于Android 的相对布局


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

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

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权