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),简称"项目"。
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属性
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