美文网首页毕业设计
RN-Style 详细说明

RN-Style 详细说明

作者: 云翳人生 | 来源:发表于2017-12-08 22:26 被阅读5105次

代码实例

var styles = StyleSheet.create({    

base: {width:38,height:38},   

background:{backgroundColor:'#222'}   

active:{borderWidth:2,borderColor:'#00ff00'}

});

Text style={styles.base} /

Text style={{styles.base, styles.background}} /

Text style={{styles.base, this.state.active && styles.active}} /

backfaceVisibility:visible|hidden;属性定义当元素不面向屏幕时是否可见

backgroundColor:背景色

transform

transformMatrix

定位

position:定位:相对定位(absolute),绝对定位(relative) 默认情况下使用的是相对定位

top:上

bottom:下

left:左

right:右

图像变换

scaleX :水平方向缩放

scaleY :垂直方向缩放

rotation :旋转

translateX :水平方向平移

translateY :水平方向平移

阴影

shadowColor

shadowOffset

shadowOpacity

shadowRadius

图片相关属性

resizeMode:enum('cover','contain','stretch') contain是指无论如何图片都包含在指定区域内,假设设置的宽度高度比图片大,则图片居中显示,否则,图片等比缩小显示

overflow:enum('visible','hidden')

tintColor:着色,rgb字符串类型

opacity:透明度

字体相关属性

color:字体颜色

fontFamily:字体族

fontSize:字体大小

fontStyle:字体样式,正常,倾斜,值为enum('normal','italic')

fontWeight:字体粗细,值为enum('normal','bold','100','200'...,'900')

letterSpacing:字符间隔

lineHeight:行高

textAlign:字体对齐方式,值为enum('auto','left','right','center','justify')

textDecorationColor:貌似没效果,修饰的线的颜色

textDecorationLine:貌似没效果,字体修饰,上划线,下划线,删除线,无修饰,值为enum("none",'underline','line-through','underline line-through')

textDecorationStyle:enum("solid",'double','dotted','dashed')貌似没效果,修饰的线的类型

writingDirection:enum("auto",'ltr','rtl')不知道什么属性,写作方向?从左到右?从右到左? 

边框相关

borderStyle:边框样式

borderWidth:所有边框宽度

borderTopWidth:顶部边框宽度

borderBottomWidth:底部边框宽度

borderLeftWidth:左边边框宽度

borderRightWidth:右边框宽度

borderColor:边框颜色

borderTopColor:顶部边框颜色

borderBottomColor:底部边框颜色

borderLeftColor:左边边框颜色

borderRightColor:右边边框颜色

边框圆角

borderRadius

borderBottomLeftRadius

borderBottomRightRadius

borderTopLeftRadius

borderTopRightRadius

Flex布局相关

flex:number

flexDirection: enum('row','column','row-reverse','column-reverse') 属性决定主轴的方向(即项目的排列方向)。

flexWrap:enum('wrap','nowrap','wrap-reverse') 默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

alignItems:enum('flex-start','flex-end','center','stretch') 属性定义项目在交叉轴上如何对齐。

alignSelf:enum('auto','flex-start','flex-end','center','stretch') 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖

justifyContent:enum('flex-start','flex-end','center','space-between','space-around') 属性定义了项目在主轴上的对齐方式。

Flex 布局教程:语法篇  Flex 布局教程:实例篇

宽高

width

height

外边距:

marginTop:上

marginBottom:下

marginLeft:左

marginRight:右

margin:相当于同时设置四个

marginVertical:相当于同时设置marginTop和marginBottom

marginHorizontal:相当于同时设置marginLeft和marginRight

内边距

paddingTop:上

paddingBottom:下

paddingLeft:左

paddingRight:右

padding:相当于同时设置四个

paddingVertical:相当于同时设置paddingTop和paddingBottom

paddingHorizontal:相当于同时设置paddingLeft和paddingRight

相关文章

  • RN-Style 详细说明

    代码实例 var styles = StyleSheet.create({base: {width:38,heig...

  • maven配置

    文件架构 详细说明

  • day 15【操作系统文件属性】

    一.文件属性详细说明----文件的权限说明 文件数据权限有什么: 二.文件属性详细说明-----文件得用户信息 系...

  • 项目详细说明

    问:为什么这个项目需要redux: 做项目的时候我通过不停总结,总算想通了:每次在页面发生跳转的时候,为了确保在下...

  • NSURLSessionConfiguration详细说明

    NSURLSessionConfiguration类的说明 NSURLSession 的配置选项。当一个会话被创建...

  • ClientSdk详细说明

    数据库相关 ClientDbExecute ClientDbQuery 配置相关 ClientGetConfigs...

  • Plist详细说明

    1. Application does not run in background(鍵名:UIApplicatio...

  • javadoc详细说明

    先看结果 本人用过idea生成的,方法如下: 1.先在idea 配置注释 菜单栏File->settings-> ...

  • Vagrantfile详细说明

    Vagrant文件说明 [x] Vagrantfile里定义的路径,都是以Vagrantfile文件所在目录,为工...

  • nginx详细配置说明

    nginx详细配置说明 nginx目录说明 成功安装nginx并解压,目录有以下几个 conf文件夹用于存放配置文...

网友评论

    本文标题:RN-Style 详细说明

    本文链接:https://www.haomeiwen.com/subject/rhaeixtx.html