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占总共多少,就有多少宽度

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,723评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,003评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,512评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,825评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,874评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,841评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,812评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,582评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,033评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,309评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,450评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,158评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,789评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,409评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,609评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,440评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,357评论 2 352

推荐阅读更多精彩内容

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