RN CSS

RN中基本都使用flexbox进行布局,但语法和常规的CSS不同:

  • 属性名都使用驼峰结构,而不是中划线,如:alignItems,不能写align-items
  • RN中display默认是 flex,另一个值是:‘none’
  • RN中flexDirection默认是 column
  • 属性取值基本就两种:数值和字符串,数值类如width的写法是width:200,不能带单位‘px’,与之类似的还有height,marginTop,left等在常规CSS中需要带px的属性;对于不带px的都要写成字符串的形式,例如position:"absolute"
  • 属性的写法:可带双引号,也可不带。如position:"absolute"或者"position":"absolute"
  • RN中CSS规则之间用逗号","分隔,常规CSS中用分号";"
  • 阴影的实现:RN端不支持box-shadow,用四个类似的属性代替ios,Android上用elevation,elevation不能设置阴影颜色,统一灰色
    shadowOffset: { width: 0, height: 5 },
    shadowRadius: 3,
    shadowColor: '#41464b',
    shadowOpacity: 0.1,
    elevation: 4
  • RN中 postion只有‘relative’ 和 ‘absolute’ ;默认为‘relative’。在Android中如果子元素使用absolute,且其宽高超过父元素,会被父元素的边界所截断
  • RN 中所有基本组件默认宽度都是100%,如Text,View,TextInput。当其参与flex布局时,Text,TextInput宽度会变为自身内容宽度
  • View 与div类似,但View不能单独使用,必须包含其他组件
  • box-sizing 默认值:'border-box'
  • 所有默认值如下:
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
flex-shrink: 0;
border: 0 solid black;
margin: 0;
padding: 0
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,842评论 1 92
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,901评论 0 6
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,245评论 0 1
  • “秋阴不散霜飞晚,留得枯荷听雨声”。 最近这一段时间的苏州,就是李商隐笔下这两句光景,时常阴雨,偶...
    洛水洛神花阅读 854评论 9 12
  • 在简书有好些日子了,中间有许多断断续续的的情节,停停写写。 看着和自己一样写书的人依然坚持,粉丝不断增加,...
    向上居士阅读 425评论 5 3