ReactNative进阶(五十一): 样式梳理

Posted No Silver Bullet

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 属性

  • backgroundColorcolor | 对应 CSS 中的 background-color 属性

3.2 宽高尺寸

属性名称 取值 对应 css 属性

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

3.3 外边距相关 (margin)

属性名称 取值 对应 css 属性

  • margin | number | 对应 CSS 中的 margin 属性,不同的是,只能定义一个参数,用以表示上、右、下、左 4 个方位的外补白
  • marginHorizontal | number | CSS 中没有对应的属性,相当于同时设置 marginRightmarginLeft
  • marginVertical | number | CSS 中没有对应的属性,相当于同时设置 marginTopmarginBottom
  • 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 中没有对应的属性,相当于同时设置 paddingRightpaddingLeft
  • paddingVertical | number CSS 中没有对应的属性,相当于同时设置 paddingToppaddingBottom
  • 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进阶(五十一): 样式梳理的主要内容,如果未能解决你的问题,请参考以下文章

ReactNative进阶(三十一): IoC 框架 InversifyJS解读

ReactNative进阶(四十一):应用FlatList实现分组列表

跨平台应用开发进阶(五十一):HTML5(富文本内容)连续数字字母不自动换行问题分析及解决

跨平台应用开发进阶(五十一):HTML5(富文本内容)连续数字字母不自动换行问题分析及解决

跨平台应用开发进阶(五十一):HTML5(富文本内容)连续数字字母不自动换行问题分析及解决

WEB前端进阶之路 HTML 全路线学习知识点梳理(中)