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

Posted 2021-10-01 No Silver Bullet

文章目录

• • 一、前言
  • 二、样式引入方法
  • 三、常见属性及说明
  • • 3.1 背景
    • 3.2 宽高尺寸
    • 3.3 外边距相关 (margin)
    • 3.4 内边距相关 (padding)
    • 3.5 边框相关 (border)
    • 3.6 位置相关 (position)
    • 3.7 文本相关 (Text)
    • 3.8 弹性布局相关 (Flex)
    • 3.9 转换相关 (transform)
    • 3.10 图片相关
    • 3.11 图像变换
  • 四、拓展阅读

---

一、前言

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适配性优化》