初识ReactNative之布局

在ReactNative中,尺寸是没有单位的

<View style={{ width:100, height: 10}}>
                                <Text style={{
                                    height: 17,
                                    width: 30,
                                    fontSize: 6
                                }}>出租</Text>
                                <Text style={{fontSize: 15, color: "#333333", marginLeft: 20}}>复兴苑小区</Text>
                            </View>

运行在Android设备中,View的宽和高100就被解释为100dp,Text的 fontSize: 6就被解释为6sp,
运行在IOS设备中,View的宽高就被解释为100pt,


父视图的属性:
flexDirection决定子元素的排列方向,当属性为column,则子元素是沿着y轴排列,当属性为row时,子元素是x轴排列。他的默认属性是column.
在这里插入图片描述

justifyContent:是决定主轴的排列方式,当flexDirection为column,则主轴为y轴,侧轴为x轴。当flexDirection为row,主轴为x轴,侧轴为y轴。justifyContent的属性为:flex-start | flex-end | center | space-between | space-around。

flex-start(默认值):伸缩项目向一行的起始位置靠齐。
flex-end:伸缩项目向一行的结束位置靠齐。
center:伸缩项目向一行的中间位置靠齐。
space-between:两端对齐,项目之间的间隔都相等。
space-around:伸缩项目会平均地分布在行里,两端保留一半的空间。
在这里插入图片描述

alignItems: 是决定侧轴位置(或者说对齐方式),他和justifyContent不一样,注意justifyContent是决定主轴排列方式,alignItems常常和justifyContent搭配使用。
alignItems的属性有:flex-start | flex-end | center | baseline | stretch

flex-start:测轴的起点对齐。
flex-end:测轴的终点对齐 。
center:测轴的中点对齐。
baseline:项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

在这里插入图片描述


子视图的属性:

alignSelf:是决定本身View的位置,可以覆盖父视图的alignItems的属性。alignSelf的属性有“auto | flex-start | flex-end | center | baseline | stretch”

stretch 元素被拉伸以适应容器。
center 元素位于容器的中心。
flex-start 元素位于容器的开头。
flex-end 元素位于容器的结尾。
在这里插入图片描述
这篇博客写的很好,全是关于RN的RN博客地址

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值