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 ...
随机推荐
- 【xsy1122】 路径 点分治+trie
题目大意:给你一棵n个点的树,树边上有边权,对于每一个点,你要求出经过该点的所有的路径中,路径异或和最大的值. 数据范围:$n≤10^5$,边权$≤10^9$. 我们考虑枚举每一条路径,显然这个是会T ...
- 给easyui datebox时间框控件扩展一个清空的实例
给easyui datebox扩展一个清空的实例 步骤一:拓展插件 /** * 给时间框控件扩展一个清除的按钮 */ $.fn.datebox.defaults.cleanText = '清空'; ( ...
- Mime、base64编码
第一部分 在阮一峰老师的博客中,是这样介绍Mime的: MIME的全称是"Multipurpose Internet Mail Extensions",中译为"多用途互联 ...
- TCP与UDP的差别以及TCP三次握手、四次挥手
UDP: 1.UDP面向报文,无需建立连接,不可靠,数量小,高层就解决差错重传,无需拥塞控制 2.支持音频.视频传输 3.检查和检验UDP包头和数据和伪首部 4.分组开销小(头部8个字节),提供最大努 ...
- glog功能介绍
1. 概述 Google glog是一个基于程序级记录日志信息的c++库,编程使用方式与c++的stream操作类似,例: LOG(INFO) << &quo ...
- mongodb-地理坐标存储查询
mongodb可支持空间地理搜索: 查询器 $geoWithin Selects geometries within a bounding GeoJSON geometry. The 2dsphere ...
- 剑指offer62:二插搜索树的第k个节点
题目描述: 给定一颗二叉搜索树,请找出其中的第k大的结点.例如, 5 / \ 3 7 /\ /\ 2 4 6 8 中,按结点数值大小顺序第三个结点的值为4. 中序遍历 /* struct TreeNo ...
- Memcached理解笔记4---应对高并发攻击
近半个月过得很痛苦,主要是产品上线后,引来无数机器用户恶意攻击,不停的刷新产品各个服务入口,制造垃圾数据,消耗资源.他们的最好成绩,1秒钟可以并发6次,赶在Database入库前,Cache进行Mis ...
- [笔记] Fiddler 抓包工具的使用
目录 Filler 的特点 Fidder工具的下载安装 Fidder 证书安装 Fiddler工作原理 Fidder 常见的命令和按钮 Fiddler 各种疑难杂症 Fillder 的特点 Fidde ...
- 把AspDotNetCoreMvc程序运行在Docker上-part4:实现负载均衡
在上一part<把AspDotNetCoreMvc程序运行在Docker上-part3:使用独立的存储容器>,我们利用MySql容器和Volume实现了真正意义上的数据存储.整个结构非常简 ...