React-Native 布局

第一次尝试些博客,目的有二:1、旨在督促自己,养成好的学习习惯;2、将自己的学习经验与网上的各路大神分享,求得共同进步; 

最近在学习react-native,页面布局是最重要的基础,以下为布局总结:

在RN中主要通过flex_box布局,组件布局属性:

position:  relative,absolute

top buttom left right  width height maxHeight maxWidth minHeight minWidth 

子组件布局属性

flexDirection: row、column(默认)、row-reverse、column-reverse  (主轴方向)

flexWrap: 当子组件按照flexDirection排列,超出屏幕范围时的处理方式:wrap(自动换行)、nowrap;

justifyContent:定义在给定方向上子组件的排列方式:flex-start、flex-end、center、space-between、space-around(首尾空白)

alignItems:定义子组件的对齐规则,flex-start、flex-end、center、stretch;

flex:1 子组件自动缩放以适应父组件剩下的空白空间;

alignSelf:通过设置此值,可以使子组件忽略父组件alignItems的布局设置,可取:auto\flex-start\flex-end\stretch;

padding\border\margin

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容