RN style使用以及常用样式总结

原创 2018年04月16日 16:42:24

React-Native 编写的应用的样式不是靠css来实现的,而是依赖javascript来为你的应用来添加样式

1、声明样式

导入必要文件

import React, { StyleSheet } from "react-native";
const styles = StyleSheet.create({
    base: {
        width: 38,
        height: 38,
    },
    background: {
        backgroundColor: '#222222',
    },
    active: {
        borderWidth: 2,
        borderColor: ‘#ff00ff',
    },
});

调用了React-Native的一个构造方法,传入一个对象生成style,如果你写过React就应该很熟悉这种写法,和React的React.createCladd()语法是一样的,传入对象的key就相当于类名,每个类也是一个对象,可以配置各种样式参数,总体来说和CSS的写法差不多,差别上把CSS的命名又“-”连字符改成驼峰写法,然后长度不用加单位“px”,字符串比如色值需要加引号写成字符串。

2、样式使用

所有的核心组件都支持样式属性

<View style={styles.base}></View>

当你需要设置多个属性类的时候,可以传入一个数组

<View style={[styles.base,styles.backgroundColor]}></View>

在两个样式又冲突的情况下,以右边的值优先,有些情况下可以加一些条件判断样式是否加载,比如,

<View style={[styles.base,this.state.active&&styles.active]} />

你也可以在组件中render样式,然而这种做法不推荐,其实就像一般html页面中行内样式不推荐一样

<View
  style={[styles.base,{width:this.state.width, height:this.state.width*this.state.aspectRatio}]}
/>


3、布局-flexbox

"弹性布局",用来为盒状模型提供最大的灵活性。采用flex布局的元素,称为flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为flex项目(flex item),简称"项目"。

container的属性:
flexDirection:‘row‘|‘column‘
//主轴的方向,水平 | 垂直,默认是 column ,item会按照主轴方向排列。

flexWrap:‘warp‘|‘nowrap’
//flexbox 会默认将所有元素基于一行,这个属性表示是否折行。
nowrap  项目沿主轴方向布局,超出容器长度的部分不可见                    
wrap       项目沿主轴布局所需长度大于容器总长度时,分行布局,所有项目内容都可见

alignItems:‘flex-start’|’flex-end’|’center’|‘stretch‘
//表示item在 cross axis 上的对齐方式,基于cross axis的顶部|基于cross axis的底部|基于cross axis的中部|布满整个。
交叉轴方向对齐方式,默认值flex-start,即交叉轴开端

justifyContent:‘flex-start’|‘flex-end‘|‘center‘|‘space-between‘|’space-around’
//表示item在 main axis 上的对齐方式,基于主轴开始|基于主轴结束|居中|左右两边对齐,item间隔相等|每个item两端间隔相等。
主轴方向对齐方式,默认值是flex-start,即主轴的开端

item属性

flex:1
布局权重
>=0 项目占位权重
1:0:flex=0的项目占用空间仅为内容所需空间,flex=1的项目会占据其余所有空间

alignSelf:‘flex-start’|’flex-end’|’center’
项目交叉轴方向自身对齐方式

RN常用样式总结

背面可见性

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')

Text Style

字体颜色

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//设置item的水平外边距
marginVertical number//设置item的垂直外边距


内边距

padding number
paddingBottom number
paddingLeft number
paddingRight number
paddingTop number
paddingHorizontal number//设置item的水平内边距
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 基础(四)使用style定义组件的样式

参考文档:http://facebook.github.io/react-native/docs/style.html style是一个props style的键值命名格式遵循CSS风格,除了名字使用...
  • KevinsCSDN
  • KevinsCSDN
  • 2016-07-29 10:44:06
  • 2564

RN CSS 样式

在开发rn 的时候,存在的者样式的,调整,其实对于一个做客户端的人来说没有什么难度。但是对于一个不是很熟的的客户段开发者来说,在从不熟悉到熟悉的道路上是,有时候一个问题会卡顿很久,所以必要的总结还是有...
  • ahubenkui
  • ahubenkui
  • 2017-06-18 11:03:50
  • 823

关于css样式总结

表单样式表移除input=number的上下箭头在chrome下:input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{...
  • leo8729
  • leo8729
  • 2016-10-08 15:34:04
  • 333

初学Android,使用样式(style)资源(二十)

在Android里面,样式的概念跟网页中CSS样式表的概念相似,并且样式之间也可以继承下面为两个文本框定义样式,创建一个my_style.xml文件放在res/values文件夹下,注意样式文件的根元...
  • lee576
  • lee576
  • 2012-08-09 09:57:36
  • 5724

混合开发的大趋势之一React Native State (状态),Style(样式)

转载请注明出处:王亟亟的大牛之路先安利:https://github.com/ddwhan0123/Useful-Open-Source-Android 今天又加了几个疑难杂症哦!!上一篇讲了属性...
  • ddwhan0123
  • ddwhan0123
  • 2016-08-18 14:53:39
  • 6068

样式和主题(Style and Theme)详解

导读:本篇文章主要根据官方文档修改,介绍了样式和主题的使用以及要注意的问题,同时也提供了Android Studio 快速抽取Style 和 编辑 Theme 的方法.样式简介:样式是指为 View ...
  • u012792686
  • u012792686
  • 2017-06-03 15:58:21
  • 905

不常用的css样式

{z-index: 10;}当你定义的CSS中有position属性值为absolute、relative或fixed,用z-index此取值方可生效。此属性参数值越大,则被层叠在最上面     .n...
  • xwj5200
  • xwj5200
  • 2018-02-28 14:11:27
  • 9

React Native常用组件样式总结

作为一个JS、CSS、RN新手,总是会遇到各种样式。在不知道样式有些什么的情况下难以很好的绘制布局。所以这里整理了一下几个常用组件的样式。...
  • violetjack0808
  • violetjack0808
  • 2016-05-06 10:33:34
  • 15716

样式对象(Style Object)

ASP.NET 支持样式对象(Style Object),样式对象可以让使用者设定一些如颜色与字型的外观显示,让某些控件的外观显示更多样化。其使用语法为: Id="被程序代码所控制的名称"Runat=...
  • keminlau
  • keminlau
  • 2004-11-12 22:39:00
  • 1613
收藏助手
不良信息举报
您举报文章:RN style使用以及常用样式总结
举报原因:
原因补充:

(最多只允许输入30个字)