React Native常用组件样式总结
在react 中,有时要使用 style 指定样式 ,如要跟随放大比例关系,展示图标。
const stylebutton = {width:25*scalesize, height:25*scalesize};
View Style
支持Flexbox、ShadowPropTypesIOS、Transforms属性。
背面可见性
backfaceVisibility enum('visible', 'hidden')
背景颜色
backgroundColor string
边框颜色
borderColor string
borderTopColor string
borderRightColor string
borderBottomColor string
borderLeftColor string
边框圆角半径
borderRadius number
borderTopLeftRadius number
borderTopRightRadius number
borderBottomLeftRadius number
borderBottomRightRadius number
边框样式
borderStyle enum('solid', 'dotted', 'dashed')
边框宽度
borderWidth number
borderTopWidth number
borderRightWidth number
borderBottomWidth number
borderLeftWidth number
不透明度
opacity number
填充
overflow enum('visible', 'hidden')
测试ID(用来定位视图)
testID string
Image Style
支持Flexbox和Transforms
调整大小模式
resizeMode Object.keys(ImageResizeMode)
背景颜色
backgroundColor string
边框属性
borderColor string
borderWidth number
borderRadius 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 number
height number
项目对齐
alignItems enum('flex-start', 'flex-end', 'center', 'stretch')
自身对齐
alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
边框宽度
borderBottomWidth number
borderLeftWidth number
borderRightWidth number
borderTopWidth number
borderWidth number
弹性伸缩
flex number
弹性伸缩方向
flexDirection enum('row', 'column')
弹性伸缩包裹
flexWrap enum('wrap', 'nowrap')
证明内容
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
外边距
margin number
marginBottom number
marginLeft number
marginRight number
marginTop number
marginHorizontal number
marginVertical number
内边距
padding number
paddingBottom number
paddingLeft number
paddingRight number
paddingTop number
paddingHorizontal number
paddingVertical number
位置(绝对、相对)
position enum('absolute', 'relative')
上下左右
right number
top number
left number
bottom 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常用组件样式总结的更多相关文章
- React Native常用组件在Android和IOS上的不同
React Native常用组件在Android和IOS上的不同 一.Text组件在两个平台上的不同表现 1.1 height与fontSize 1.1.1只指定font,不指定height 在这种情 ...
- React Native常用组件之ListView
1. ListView常用属性 ScrollView 相关属性样式全部继承 dataSource ListViewDataSource 设置ListView的数据源 initialListSize n ...
- React Native常用组件之ScrollView
1. 两个要点 1.1 ScrollView必须有一个确定的高度才能正常工作 它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作) 通常有两种做法: 第一种: 直接给该S ...
- React Native常用组件之TabBarIOS、TabBarIOS.Item组件、Navigator组件、NavigatorIOS组件、React Navigation第三方
以下内容为老版本React Native,faceBook已经有了新的导航组件,请移步其他博客参考>>[我是传送门] 参考资料:React Navigation react-native ...
- React Native常用组件之ListView组件
学习iOS开发的同学应该都知道UITableView,几乎每个APP中都有它的存在,而且衍生出各种形态:那么同样,ListView就是在React Native中的tableView,而且更加简单和灵 ...
- React Native常用组件之ScrollView组件
一.前言 从iOS开发的经验来看,scrollView无疑是移动开发中很重要的一个组件,比如后面会学到的ListView就是继承自它.那么,在开发中比如:焦点图.引导页等地方都有其的影子,那接下来我们 ...
- React Native常用组件Image使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- react native 常用组件汇总
react-native-uploader //文件上传https://github.com/aroth/react-native-uploader jpush-react-native //官方版本 ...
- 一起来点React Native——常用组件之Touchable系列
在前面的登录界面中,我们发现所有的组件不会对用户的点击.触摸.拖拽做出合适的响应,这是十分不友好的.那么,在React Native中如何让视图对触发做出合适的响应呢? 一.高亮触摸 Touchab ...
随机推荐
- Java堆内存溢出模拟
先了解一下Java堆: 关于Java内存区域的分配,可以查看Java运行时数据区域一篇文章. Java堆是虚拟机内存管理中最大的一块区域,该区域是线程共享的,某Java进程中所有的线程都可以访问该区域 ...
- Java虚拟机执行引擎
执行引擎 关于执行引擎相关的部分, 在之前的博文里 Java内存区域中已经有所提及. 回顾一下: 也只有几个概念, JVM方法调用和执行的基础数据结构是 栈帧, 是内存区域中 虚拟机栈中的栈元素, 每 ...
- node 利用http和cheerio编写简易爬虫
首先cnpm init创建一个package.json 引入cheerio模块 cnpm install --save cheerio 然后开始编写代码 let cheerio = require(' ...
- (转)MySQL 线程池内幕
原文:http://blog.jobbole.com/109695/ http://mysqllover.com/?p=826 http://blog.csdn.net/hsuxu/article/d ...
- 隐型马尔科夫模型(HMM)向前算法实例讲解(暴力求解+代码实现)---盒子模型
先来解释一下HMM的向前算法: 前向后向算法是前向算法和后向算法的统称,这两个算法都可以用来求HMM观测序列的概率.我们先来看看前向算法是如何求解这个问题的. 前向算法本质上属于动态规划的算法,也就是 ...
- IDEA里运行程序时出现Error:scalac:error while loading JUnit4 , Scala signature JUnit4 has wrong version错误的解决办法(图文详解)
不多说,直接上干货! 问题详情 当我们在运行程序时,出现Error:scalac:error while loading JUnit4 , Scala signature JUnit4 has wro ...
- JavaScript -- Constructor、Prototype
----- 012-constructor.html ----- <!DOCTYPE html> <html> <head> <meta http-equiv ...
- pygame游戏开发-简介
转自白月黑羽Python教程:http://www.python3.vip/doc/tutorial/python/game/ 推荐对Python有兴趣的童鞋可以关注去看看,教程语言平实,简单易懂. ...
- 全连接层(FC)与全局平均池化层(GAP)
在卷积神经网络的最后,往往会出现一两层全连接层,全连接一般会把卷积输出的二维特征图转化成一维的一个向量,全连接层的每一个节点都与上一层每个节点连接,是把前一层的输出特征都综合起来,所以该层的权值参数是 ...
- Java并发编程笔记之ThreadLocalRandom源码分析
JDK 并发包中 ThreadLocalRandom 类原理剖析,经常使用的随机数生成器 Random 类的原理是什么?及其局限性是什么?ThreadLocalRandom 是如何利用 ThreadL ...