本文共 2941 字，大约阅读时间需要 9 分钟。
最近换了工作，感受了一下金三银四是什么体验。总的来说，竞争比往年还要激烈一点，去年前端大火，各类框架层出不穷，各种工具百花齐放，让其他各个行业看到了前端的发展潜力和工作中的重要性。
在五年前，前端的入门门槛还是很低的，因为没什么架构可以选型的，很多公司都是后端程序员拼拼凑凑就把前台页面给搭出来了，并且与耻写前端，说这个是美工干的活。
近两年不一样了，前端的门槛越来越高，特别新入行的同事，可能都没用过jq。就直接入门了MVVM框架，WebPack打包工具，ES6等等。 而且培训机构可以在3个月到半年的时间里从零把一个这样的前端培养出来输送给企业。 前端的薪资被恶性的压低，有经验的前端呢，要不不愿意学习被时代淘汰，要不只能拿着比之前可能都有低的薪水去跳槽。说到现在也是奉劝各位1、保持学习、努力解决各种问题2、不要轻易跳槽、多在公司内部改变3、提高自己的代码要求，提高自己思想
好了，不扯了。说下正题。新公司用的是React native。其语法是react，调用native组件实现的。 初次接触肯定有些陌生，包括写法，用法，以及思想。这里就不展开说了，总结一下RN的样式写法：
React Native的View组件支持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组件的样式写法
Image组件支持Flexbox和Transforms
调整大小模式
resizeMode Object.keys(ImageResizeMode)
背景颜色
backgroundColor string
边框属性
borderColor stringborderWidth numberborderRadius number
填充
overflow enum('visible', 'hidden')
不透明度
opacity number
色彩颜色
tintColor string
Text组件的样式写法
Text组件支持View的样式
字体颜色
color string
字体
fontFamily string
字体大小
fontSize number
字体样式
fontStyle enum('normal', 'italic')
字体粗细
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组件的样式写法
宽高
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
转载地址：http://ryod.baihongyu.com/