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 透明度