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页面中行内样式不推荐一样

<Viewstyle={[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

RN style使用以及常用样式总结相关推荐

前端之css引入方式/长度及颜色单位/常用样式
1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...
css文字向右对齐_web前端入门到实战：css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...
Qt样式表之二：QSS语法及常用样式
一.简述 Qt样式表(以下统称QSS)的术语和语法规则几乎和CSS相同.如果你熟悉CSS,可以快速浏览以下内容.不熟悉的话可以先去W3School - CSS或者本人的CSS博客随笔简单了解一下. 在 ...
CSS常用样式及示例
CSS常用样式及示例一.简介层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式 ...
html常用样式margin、border怎么使用
html常用样式margin.border怎么使用一.总结一句话总结:1.margin:auto配合width才能居中:2.border的三个属性依次是边框宽度,边框样式,边框颜色 1.html中 ...
CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
[总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
dw中css目标规则命名,css 常用样式命名规则
大家在写css的时候,对一些html标签起一个合适的名字是个很头疼的事情,现在给大家分享项目中常用的名字供参考. 外套:wrap --用于最外层头部:header --用于头部主要内容:mai ...
css常用样式（文字样式、边框样式、背景样式）
CSS常用样式 CSS常用文字样式 color: brown; /*文字颜色*/ /*color: #333333;这样的也可以,这种颜色的表示方法是RGB的方式,没两位数表示一种颜色的度数, 一般情 ...

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

1、声明样式

2、样式使用

3、布局-flexbox

RN常用样式总结

RN style使用以及常用样式总结相关推荐

最新文章

热门文章