ReactNative 进阶（五十一）: 样式梳理

一、前言

ReactNative 的样式是 CSS 样式的一个子集，并且属性名称与 CSS 中规定的也不完全相同。

二、样式引入方法

常见的引用样式的几种方法，包括内嵌方式，外联方式和混合方式，还可以把样式定义在单独的文件中，通过 import 引用。

1. 内嵌方式

export default class appProject extends Component {    render() {        return (            <View style={                {                marginTop:200,                marginLeft:5,                marginRight:5,                height:84,                flexDirection:'row',                backgroundColor:'#FF0067',                }                }>            </View>        )    }}

2. 外联方式

const Styles = StyleSheet.create({    container: {        marginTop:200,        marginLeft:5,        marginRight:5,        height:84,        flexDirection:'row',        backgroundColor:'#FF0067',    }});

3. 混合方式

export default class appProject extends Component {    render() {        return (            //外层容器            <View style={[Styles.container,Styles.bg,{color:'red'}]}>            </View>        )    }}

4.import 引用

import React from 'react'import {    StyleSheet,} from 'react-native';
const styles = StyleSheet.create({    container: {        marginTop:200,        marginLeft:5,        marginRight:5,        height:84,        flexDirection:'row',    },    bg:{        backgroundColor:'#FF0067',    }});module.exports = styles;

通过 import 进行引入

import styles from './styles/style';

三、常见属性及说明

3.1 背景

属性名称 取值 对应 css 属性

• backgroundColor｜ color ｜ 对应 CSS 中的 background-color 属性

3.2 宽高尺寸

属性名称 取值 对应 css 属性

• width｜number | 对应 CSS 中的 width 属性

• height | number | 对应 CSS 中的 height 属性

3.3 外边距相关 (margin)

属性名称 取值 对应 css 属性

• margin | number | 对应 CSS 中的 margin 属性，不同的是，只能定义一个参数，用以表示上、右、下、左 4 个方位的外补白

• marginHorizontal | number | CSS 中没有对应的属性，相当于同时设置 marginRight 和 marginLeft
  

• marginVertical | number | CSS 中没有对应的属性，相当于同时设置 marginTop 和 marginBottom
  

• marginTop | number | 对应 CSS 中的 margin-top 属性

• marginRight | number | 对应 CSS 中的 margin-right 属性

• marginBottom | number | 对应 CSS 中的 margin-bottom 属性

• marginLeft | number | 对应 CSS 中的 margin-left 属性

3.4 内边距相关 (padding)

属性名称 取值 对应 css 属性

• padding | number 对应 CSS 中的 padding 属性，不同的是，只能定义一个参数，用以表示上、右、下、左 4 个方位的内补白

• paddingHorizontal | number CSS 中没有对应的属性，相当于同时设置 paddingRight 和 paddingLeft
  

• paddingVertical | number CSS 中没有对应的属性，相当于同时设置 paddingTop 和 paddingBottom
  

• paddingTop | number 对应 CSS 中的 padding-top 属性

• paddingRight | number 对应 CSS 中的 padding-right 属性

• paddingBottom | number | 对应 CSS 中的 padding-bottom 属性

• paddingLeft | number | 对应 CSS 中的 padding-left 属性

3.5 边框相关 (border)

属性名称 取值 对应 css 属性

• borderStyle | solid, dotted, dashed 对应 CSS 中的 border-style 属性，但阉割了 none, hidden, double, groove, ridge, inset, outset 取值，且无方向分拆属性

• borderWidth | number | 对应 CSS 中的 border-width 属性

• borderTopWidth | number 对应 CSS 中的 border-top-width 属性

• borderRightWidth| number 对应 CSS 中的 border-right-width 属性

• borderBottomWidth | number 对应 CSS 中的 border-bottom-width 属性

• borderLeftWidth | number 对应 CSS 中的 border-left-width 属性

• borderColor | color | 对应 CSS 中的 border-color 属性

• borderTopColor | color | 对应 CSS 中的 border-top-color 属性

• borderRightColor | color | 对应 CSS 中的 border-right-color 属性

• borderBottomColor | color | 对应 CSS 中的 border-bottom-color 属性

• borderLeftColor | color | 对应 CSS 中的 border-left-color 属性

• borderRadius | number | 对应 CSS 中的 border-radius 属性

• borderTopLeftRadius | number | 对应 CSS 中的 border-top-left-radius 属性

• borderTopRightRadius | number | 对应 CSS 中的 border-top-right-radius 属性

• borderBottomLeftRadius | number | 对应 CSS 中的 border-bottom-left-radius 属性

• borderBottomRightRadius | number | 对应 CSS 中的 border-bottom-right-radius 属性

3.6 位置相关 (position)

属性名称 取值 对应 css 属性

• position | absolute, relative 对应 CSS 中的 position 属性，但阉割了 static, fixed 取值

• top | number | 对应 CSS 中的 top 属性

• right | number | 对应 CSS 中的 right 属性

• bottom | number | 对应 CSS 中的 bottom 属性

• left | number | 对应 CSS 中的 left 属性

3.7 文本相关 (Text)

属性名称 取值 对应 css 属性

• color | color | 对应 CSS 中的 color 属性

• fontFamily | string | 对应 CSS 中的 font-family 属性

• fontSize | number | 对应 CSS 中的 font-size 属性

• fontStyle | normal, italic 对应 CSS 中的 font-style 属性，但阉割了 oblique 取值

• fontWeight | normal, bold 100~900 对应 CSS 中的 font-weight 属性，但阉割了 bolder, lighter 取值

• lineHeight | number | 对应 CSS 中的 line-height 属性

• textAlign | auto, left, right, center, justifyiOS | 对应 CSS 中的 text-align 属性，增加了 auto 取值

• textAlignVerticalAndroid | auto, top, bottom, center | 对应 CSS 中的 vertical-align 属性，增加了 auto 取值，center 取代了 middle，并阉割了 - baseline, sub 等值

• textShadowColor | color | 对应 CSS 中的 text-shadow 属性中的颜色定义

• textShadowOffset | {width: number, height: number} | 对应 CSS 中的 text-shadow 属性中的阴影偏移定义

• textShadowRadius | number | 在 CSS 中，阴影的圆角大小取决于元素的圆角定义，不需要额外定义

• letterSpacingiOS | number | 对应 CSS 中的 letter-spacing 属性，但取值不同

• textDecorationColoriOS | color | 对应 CSS 中的 text-decoration-color 属性

• textDecorationLineiOS | none, underline, line-through, underline line-through | 对应 CSS 中的 text-decoration-line 属性，但阉割了 overline, blink 取值

• textDecorationStyleiOS | solid, double, dotted, dashed | 对应 CSS 中的 text-decoration-style 属性，但阉割了 wavy 取值

• writingDirectioniOS | auto, ltr, rtl | 对应 CSS 中的 direction 属性，增加了 auto 取值

3.8 弹性布局相关 (Flex)

属性名称 取值 对应 css 属性

• flex | number | 对应 CSS 中的 flex 属性

• flexDirection | row, column | 对应 CSS 中的 flex-direction 属性，但阉割了 row-reverse, column-reverse 取值

• flexWrap | wrap, nowrap | 对应 CSS 中的 flex-wrap 属性，但阉割了 wrap-reverse 取值

• justifyContent | flex-start, flex-end, center, space-between, space-around | 对应 CSS 中的 justify-content 属性，但阉割了 stretch 取值。

• alignItems | flex-start, flex-end, center, stretch | 对应 CSS 中的 align-items 属性，但阉割了 baseline 取值。

• alignSelf | auto, flex-start, flex-end, center, stretch | 对应 CSS 中的 align-self 属性，但阉割了 baseline 取值

3.9 转换相关 (transform)

属性名称 取值 对应 css 属性

• 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}] | 对应 CSS 中的 transform 属性

• transformMatrix | TransformMatrixPropType | 类似于 CSS 中 transform 属性的 matrix() 和 matrix3d() 函数

• backfaceVisibility | visible, hidden | 对应 CSS 中的 backface-visibility 属性

3.10 图片相关

属性名称 取值 对应 css 属性

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

• overflow | visible, hidden 超出部分是否显示，hidden 为隐藏

• tintColor | number 着色，rgb 字符串类型

• opacity| number 透明度

3.11 图像变换

属性名称 取值 对应 css 属性

• rotation – 旋转

• scaleX – 水平方向缩放

• scaleY – 垂直方向缩放

• translateX – 水平方向平移

• translateY – 水平方向平移

四、拓展阅读

• 《ReactNative进阶（四十四）：Mobile App适配性优化》