RN学习-布局

  • 边框:想让自己外边有边框时候,类似ios的layer.borderWidth
borderBottomWidth number 底部边框宽度
borderLeftWidth number 左边框宽度
borderRightWidth number 右边框宽度
borderTopWidth number 顶部边框宽度
borderWidth number 边框宽度
border<Bottom|Left|Right|Top>Color 各方向边框的颜色,<>表示连着一起,例如borderBottomColor
borderColor 边框颜色
  • 外边距:设置自己在父控件的位置的时候使用
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 上下内边距
  • 相对定位和绝对定位
    边缘
left    左边缘。
right   右边缘。
top     顶部边缘。
bottom  底部边缘。

定位

absolute:绝对定位,参照父控件位置定位
relative:相对定位,参照当前控件原始位置定位

两者配合使用,设置定位方式,在设置四周的距离

  • Flex布局:运用于父与所有的子控件的相对布局

http://reactnative.cn/docs/0.49/layout-with-flexbox.html#content

flexDirection:决定主轴的方向,水平或者垂直,这样子组件就会水平排布或者垂直排布,在RN中默认为column

row(默认值):主轴为水平方向,从左向右。依次排列
row-reverse:主轴为水平方向,从右向左依次排列
column:主轴为垂直方向,默认的排列方式,从上向下排列
column-reverse:主轴为垂直方向,从下向上排列

flexWrap:决定子控件在父视图内是否允许多行排列,默认为nowrap

nowrap 组件只排列在一行上,可能导致溢出
wrap   组件在一行排列不下时,就进行多行排列

justifyContent决定子组件在主轴中具体布局,是靠左,还是居中等,默认为flex-start

flex-start: 子组件向主轴起点对齐,如果主轴水平,从左开始,主轴垂直,从上开始
flex-end 子组件向主轴终点对齐,如果主轴水平,从右开始,主轴垂直,从下开始
center 居中显示,注意:并不是让某一个子组件居中,而是整体有居中效果
space-between 均匀分配,相邻元素间距离相同。每行第一个组件与行首对齐,每行最后一个组件与行尾对齐
space-around 均匀分配,相邻元素间距离相同。每行第一个组件到行首的距离和每行最后一个组件到行尾的距离将会是相邻元素之间距离的一半

alignItems:决定子组件在测轴中具体布局,如果侧轴垂直,决定子组件在上,还是下,或者居中,默认为stretch

flex-start 子组件向侧轴起点对齐
flex-end 子组件向侧轴终点对齐
center 子组件在侧轴居中
stretch 子组件在侧轴方向被拉伸到与容器相同的高度或宽度

alignSelf:自定义自己的侧轴布局,用于一个子组件设置。
注意:当某个子组件不想参照默认的alignItems时,可以设置alignSelf,自定义自己的侧轴布局,默认为auto。

auto 继承它的父容器的alignItems属性。如果没有父容器则为 "stretch"
flex-start 子组件向侧轴起点对齐。
flex-end 子组件向侧轴终点对齐。
center 子组件在侧轴居中。
stretch 子组件在侧轴方向被拉伸到与容器相同的高度或宽度。

flex: 决定子控件在主轴中占据几等分。可以为任意数字,所有子控件flex相加,自己flex占总共多少,就有多少宽度

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

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,093评论 1 92
  • 一、简介 2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。 f...
    ITxiansheng阅读 2,535评论 0 1
  • ReactNaive之CSS和Flex布局 ReactNaive相关文章1. React Native 中文网2....
    TitanCoder阅读 1,279评论 0 1
  • 一般使用ReactNative开发App,一般都采用Flex布局,使用这套布局就非常快。Flex简介Flex又叫弹...
    因幡白兔阅读 970评论 6 8
  • 你的痛苦 被绑在危言的十字架上 撒旦在你的眼中挖掘着坟墓 啃噬着你心中的善恶轮回 你的痛苦 在这纯白花雨里微微颤抖...
    死亡诗约阅读 229评论 1 1

友情链接更多精彩内容