美文网首页
React Native学习笔记之布局

React Native学习笔记之布局

作者: luxing123 | 来源:发表于2018-10-13 10:53 被阅读0次

    在React Native中尺寸是没有单位的,它代表了设备独立像素

    <View style={ {width:100,height:100}}>
            <Text style={ {fontSize:16}}>尺寸</Text>
    </View>
    

    上述代码,运行在Android上时,View的长和宽被解释成:100dp 100dp单位是dp,字体被解释成16sp 单位是sp,运行在iOS上时尺寸单位被解释称了pt,这些单位确保了布局在任何不同dpi的手机屏幕上显示不会发生改变;

    Flex

    父视图属性(容器属性):

    flexDirection enum(‘row’, ‘column’,’row-reverse’,’column-reverse’)
    flexWrap enum(‘wrap’, ‘nowrap’)
    justifyContent enum(‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’)
    alignItems enum(‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’)
    

    子视图属性

    alignSelf enum(‘auto’, ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’)
    flex number
    
    alignSelf.jpg

    边框

    borderBottomWidth number 底部边框宽度
    borderLeftWidth number 左边框宽度
    borderRightWidth number 右边框宽度
    borderTopWidth number 顶部边框宽度
    borderWidth number 边框宽度
    border<Bottom   Left    Right   Top>Color 个方向边框的颜色
    borderColor 边框颜色
    

    尺寸

    width number
    height number
    

    外边距

    margin number 外边距
    marginBottom number 下外边距
    marginHorizontal number 左右外边距
    marginLeft number 左外边距
    marginRight number 右外边距
    marginTop number 上外边距
    marginVertical number 上下外边距
    

    内边距

    padding number 内边距
    paddingBottom number 下内边距
    paddingHorizontal number 左右内边距
    paddingLeft number 做内边距
    paddingRight number 右内边距
    paddingTop number 上内边距
    paddingVertical number 上下内边距
    

    边缘

    right number 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移
    top number 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
    bottom number 属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
    

    定位(position)

    absolute:生成绝对定位的元素,元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
    relative:生成相对定位的元素,相对于其正常位置进行定位。因此,”left:20” 会向元素的 LEFT 位置添加 20 像素。
    

    例如:

        position:absolute;
        left:100px;
        top:150px;
    

    相关文章

      网友评论

          本文标题:React Native学习笔记之布局

          本文链接:https://www.haomeiwen.com/subject/dltoaftx.html