React Native常用组件样式总结
来源:互联网 发布:linux删除文件权限不够 编辑:程序博客网 时间:2024/06/07 07:30
作为一个JS、CSS、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
参考资料
react native中文网
0 0
- React Native常用组件样式总结
- React Native常用组件样式总结
- [React-Native]常用组件
- React Native常用组件
- react native常用组件
- React Native 之样式总结
- react-native 常用组件
- React Native常用一些组件
- React-native View组件transform样式
- react-native项目之样式总结
- React Native常用组件Image使用
- React Native常用第三方组件
- React Native常用第三方组件汇总
- React Native入门教程2 -- 基本组件使用及样式
- React-Native进阶_1.抽取样式和组件
- React native 常用第三方件总结
- React Native 项目常用第三方组件 很常用
- React Native 三:样式
- 设计模式之策略模式
- java 读取图片文件再生成新图片
- leetcode--Remove Element
- SocketChannel类(用于阻塞或非阻塞式传输数据) 创建SocketChannel要使用SocketChannel类的静态工厂方法。 SocketChannel open():创建未连接的
- 应用之星:免费的无技术要求的 在线电子书制作平台
- React Native常用组件样式总结
- OpenCV 序列CvSeq
- Integer Break
- [一起学Hive]之六-Hive的动态分区
- 说说Android中的style和theme
- 设计模式C++学习笔记之十二(Command命令模式)
- Torch7深度学习教程(二)
- 添加Page_Init事件
- springMVC dao层中通过反射获取entityClass