博客
关于我
React Native常用组件样式总结-前端那些事
阅读量:124 次
发布时间:2019-02-28

本文共 3049 字,大约阅读时间需要 10 分钟。

小结:

最近换了工作,感受了一下金三银四是什么体验。总的来说,竞争比往年还要激烈一点,去年前端大火,各类框架层出不穷,各种工具百花齐放,让其他各个行业看到了前端的发展潜力和工作中的重要性。

在五年前,前端的入门门槛还是很低的,因为没什么架构可以选型的,很多公司都是后端程序员拼拼凑凑就把前台页面给搭出来了,并且与耻写前端,说这个是美工干的活。

近两年不一样了,前端的门槛越来越高,特别新入行的同事,可能都没用过jq。就直接入门了MVVM框架,WebPack打包工具,ES6等等。 而且培训机构可以在3个月到半年的时间里从零把一个这样的前端培养出来输送给企业。 前端的薪资被恶性的压低,有经验的前端呢,要不不愿意学习被时代淘汰,要不只能拿着比之前可能都有低的薪水去跳槽。说到现在也是奉劝各位

1、保持学习、努力解决各种问题

2、不要轻易跳槽、多在公司内部改变

3、提高自己的代码要求,提高自己思想

好了,不扯了。说下正题。新公司用的是React native。其语法是react,调用native组件实现的。 初次接触肯定有些陌生,包括写法,用法,以及思想。这里就不展开说了,总结一下RN的样式写法:

View Style

支持Flexbox、ShadowPropTypesIOS、Transforms属性。

背面可见性

backfaceVisibility enum('visible', 'hidden')

背景颜色

backgroundColor string

边框颜色

borderColor stringborderTopColor stringborderRightColor stringborderBottomColor stringborderLeftColor string

边框圆角半径

borderRadius numberborderTopLeftRadius numberborderTopRightRadius numberborderBottomLeftRadius numberborderBottomRightRadius number

边框样式

borderStyle enum('solid', 'dotted', 'dashed')

边框宽度

borderWidth numberborderTopWidth numberborderRightWidth numberborderBottomWidth numberborderLeftWidth number

不透明度

opacity number

填充

overflow enum('visible', 'hidden')

测试ID(用来定位视图)

testID string

Image Style

支持Flexbox和Transforms

调整大小模式

resizeMode Object.keys(ImageResizeMode)

背景颜色

backgroundColor string

边框属性

borderColor stringborderWidth numberborderRadius number

填充

overflow enum('visible', 'hidden')

色彩颜色

tintColor string

不透明度

opacity number

Text Style

支持View的样式

字体颜色

color string

字体

fontFamily string

字体大小

fontSize number

字体样式

fontStyle enum('normal', 'italic')

字体粗细(指定字体的粗细。大多数字体都支持’normal’和’bold’值。并非所有字体都支持所有的数字值。如果某个值不支持,则会自动选择最接近的值。)

fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')

字间距

letterSpacing number

行间距

lineHeight number

字体对齐方式(指定文本的对齐方式。其中’justify’值仅iOS支持。)

textAlign enum("auto", 'left', 'right', 'center', 'justify')

Flexbox Style

宽高

width numberheight number

项目对齐

alignItems enum('flex-start', 'flex-end', 'center', 'stretch')

自身对齐

alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')

边框宽度

borderBottomWidth numberborderLeftWidth numberborderRightWidth numberborderTopWidth numberborderWidth number

弹性伸缩

flex number

弹性伸缩方向

flexDirection enum('row', 'column')

弹性伸缩包裹

flexWrap enum('wrap', 'nowrap')

证明内容

justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')

外边距

margin numbermarginBottom numbermarginLeft numbermarginRight numbermarginTop numbermarginHorizontal numbermarginVertical number

内边距

padding numberpaddingBottom numberpaddingLeft numberpaddingRight numberpaddingTop numberpaddingHorizontal numberpaddingVertical number

位置(绝对、相对)

position enum('absolute', 'relative')

上下左右

right numbertop numberleft numberbottom number

Transform

属性变化

transform [    {perspective: number},     {rotate: string},     {rotateX: string},     {rotateY: string},     {rotateZ: string},     {scale: number},     {scaleX: number},     {scaleY: number},     {translateX: number},     {translateY: number},     {skewX: string},     {skewY: string}]

属性矩阵

transformMatrix TransformMatrixPropType



id_7-768*90

转载地址:http://ryod.baihongyu.com/

你可能感兴趣的文章
Mysql学习总结(74)——慢SQL!压垮团队的最后一根稻草!
查看>>
Mysql学习总结(75)——并发量大、数据量大的互联网业务数据库设计军规
查看>>
Mysql学习总结(76)——MySQL执行计划(explain)结果含义总结
查看>>
Mysql学习总结(77)——温故Mysql数据库开发核心原则与规范
查看>>
Mysql学习总结(78)——MySQL各版本差异整理
查看>>
Mysql学习总结(79)——MySQL常用函数总结
查看>>
Mysql学习总结(7)——MySql索引原理与使用大全
查看>>
Mysql学习总结(80)——统计数据库的总记录数和库中各个表的数据量
查看>>
Mysql学习总结(81)——为什么MySQL不推荐使用uuid或者雪花id作为主键?
查看>>
Mysql学习总结(82)——MySQL逻辑删除与数据库唯一性约束如何解决?
查看>>
Mysql学习总结(83)——常用的几种分布式锁:ZK分布式锁、Redis分布式锁、数据库分布式锁、基于JDK的分布式锁方案对比总结
查看>>
Mysql学习总结(84)—— Mysql的主从复制延迟问题总结
查看>>
Mysql学习总结(85)——开发人员最应该明白的数据库设计原则
查看>>
Mysql学习总结(8)——MySql基本查询、连接查询、子查询、正则表达查询讲解
查看>>
Mysql学习总结(9)——MySql视图原理讲解与使用大全
查看>>
Mysql学习笔记 - 在Centos7环境下离线安装Mysql
查看>>
MySQL学习笔记十七:复制特性
查看>>
Mysql学习第一课-mysql的定义及sql语句
查看>>
mysql学号的字符长度_MYSQL--2
查看>>
mysql安全模式: sql_safe_updates
查看>>