React-native 布局相关笔记

  1. react 宽度基于pt为单位, 可以通过Dimensions 来获取宽高,PixelRatio 获取密度。
  2. 基于flex的布局
  3. view默认宽度为100%
  4. 水平居中用alignItems, 垂直居中用justifyContent
  5. 基于flex能够实现现有的网格系统需求,且网格能够各种嵌套无bug
  6. 图片布局
  7. 通过Image.resizeMode来适配图片布局,包括contain, cover, stretch
  8. 默认不设置模式等于cover模式
  9. contain模式自适应宽高,给出高度值即可
  10. cover铺满容器,但是会做截取
  11. stretch铺满容器,拉伸
  12. 定位
  13. 定位相对于父元素,父元素不用设置position也行
  14. padding 设置在Text元素上的时候会存在bug。所有padding变成了marginBottom
  15. 文本元素
  16. 文字必须放在Text元素里边
  17. Text元素可以相互嵌套,且存在样式继承关系
  18. numberOfLines 需要放在最外层的Text元素上,且虽然截取了文字但是还是会占用空间

来自 http://segmentfault.com/a/1190000002658374

如何把图片设置为圆形的:通过borderRadius属性,将borderRadius设置为宽度或者高度的一半(一般宽和高的值是一样的,不然就不是正方形的基础图片了)
例如

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值