写点什么

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

  • 2022 年 2 月 03 日
  • 本文字数:3690 字

    阅读完需:约 12 分钟

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 – 水平方向平移

四、拓展阅读

发布于: 刚刚阅读数: 3
用户头像

No Silver Bullet 2021.07.09 加入

岂曰无衣 与子同袍

评论

发布
暂无评论
ReactNative进阶(五十一): 样式梳理