React Native 组件样式使用汇总

前言

React Native 的组件样式是 CSS 的一个子集，为此整理了一份 RN 与 CSS 的对应关系以便快去上手。结构没有按照官方分类来划分，目前分为：

• 基础组件类

  1. Text style
  2. View style
  3. Image style

• 布局类

  1. Layout style
  2. Flexbox style

• 效果类

  1. Transform style
  2. Shadow style

写在前面： React Native 的 颜色是支持 CSS3 的规范，color 都是以字符串的形式传入，请参考 React Native Color Reference。

Text 样式

用于显示文本的 React Native 组件。支持嵌套、样式和触摸事件处理。
Text 基本可以使用所有的常见样式，但其他组件不一定能使用 Text 的样式。

Text 字体

color string
fontFamily string
fontSize number
fontStyle enum（'normal', 'italic'）
fontWeight enum（'normal', 'bold', '100 ~ 900'）

Text 对齐

lineHeight number
letterSpacing number
textAlign enum('auto', 'left', 'right', 'center', 'justify')
指定文本的对齐方式。其中'justify'值仅iOS支持，在Android上会变为left。

Text 下划线

textDecorationStyle enum（'solid', 'double', 'dotted', 'dashed'）
textDecorationLine enum（'none', 'underline', 'line-through', 'underline line-through'）
textDecorationColor string

Text 阴影

textShadowColor string
textShadowOffset {width: number, height: number}
textShadowRadius number

样式使用

// 使用方式 1
<Text style={{color: '#d2d2d2', lineHeight: 6}}></Text>

// 使用方式 2
const styles = {
    text: {
      color: '#d2d2d2',
      lineHeight: 6
    }
}
<Text style={styles.text}></Text>

常用属性

numberOfLines 文本行数限制
selectable 用户是否可以长按选择文本，例如复制粘贴

<Text numberOfLines={3}>all contacts</Text>
<Text selectable={true}>all contacts</Text>

注意：以上属性只能用于 Text 组件，样式名称需要首字母小写的驼峰命名，例如lineHeight。另外像阴影不能使用简写方式，只能分开声明样式，在CSS当中的background、border等简写RN中只能分开声明。

文本嵌套/实现继承

前面提到除了 Text 组件，其他不能使用该样式，所以无法像在 HTML 中，给在父级 div 设定 color 后，子节点都继承字体颜色。在 RN 中我们不能给 View 组件设定字体颜色，同时也不能直接把文字放在 View 组件中，文字应该被 Text 组件包裹。如果我们想使用继承，可以通过文本嵌套来实现。

<Text style={{color: 'blue'}}>
  contacts
  <Text> Your name</Text>
  <Text> My name</Text>

</Text>

我们给外面的 Text 组件设置字体颜色为 blue 后，'Your name' 也变成了 blue。

Text 包裹

此时 text 组件默认在一行，如果将最外层的 Text 组件 改为 View 组件，此时会发现，文本自动占据一行。

把 Text 组件 改为 View，同时去掉 View 中的字符和 View 上的样式，代码如下。

<View style={{}}>
  <Text> Your name</Text>
  <Text> My name</Text>
</View>

结果文本将各占一行。

view 包裹

在 RN 中不像 HTML 那么灵活的去改变行内元素，块级元素。如果文本是在一行，设置宽度和高度无效，反之可以，可自行尝试。

View 样式

view 组件还支持布局样式、效果样式。

边框颜色

borderColor string
borderTopColor string
borderRightColor string
borderBottomColor string
borderLeftColor string

边框圆角半径

borderRadius number
borderTopLeftRadius number
borderTopRightRadius number
borderBottomLeftRadius number
borderBottomRightRadius number

边框样式

borderStyle enum('solid', 'dotted', 'dashed')

边框宽度

borderWidth number
borderTopWidth number
borderRightWidth number
borderBottomWidth number
borderLeftWidth number

显示

opacity number
backgroundColor string
backfaceVisibility enum('visible', 'hidden')
overflow enum('visible', 'hidden')

注意：View 组件不支持 Text 样式。

Image 样式

Image 组件还支持布局样式、效果样式。

调整大小模式

resizeMode Object.keys(ImageResizeMode)
该属性可以像 css 中的 background-image 一样，控制他的显示方式，例如裁剪显示，包含显示。

色彩颜色

tintColor string
将所有不透明像素的颜色更改为tintColor。

常用属性

resizeMode 既是 Image 组件的一个样式，也是一个属性，用来初始化该组件的显示方式。
source 等同于 <image> 标签的 src，不同的是 source 是一个对象而不是字符串，支持的格式为png, jpg, jpeg, bmp, gif, webp (仅Android), psd (仅iOS)。

// 使用网络资源：
<Image source={{uri: 'www.baidu.com/logo.png'}}/>

// 使用本地静态资源需要先require：
<Image source={require('./img/check.png')} />

注意：虽然 Image 组件支持 View 样式，但以下样式在 iOS 平台 Image 组件不支持。
borderTopLeftRadius、borderTopRightRadius、borderBottomLeftRadius、borderBottomRightRadius

Layout 样式

宽高

width number
height number

外边距

margin number
marginBottom number
marginLeft number
marginRight number
marginTop number
marginHorizontal number
marginVertical number

内边距

padding number
paddingBottom number
paddingLeft number
paddingRight number
paddingTop number
paddingHorizontal number
paddingVertical number

定位

position enum('absolute', 'relative')
right number
top number
left number
bottom number

FlexBox 样式

与 CSS flex 语法很相近。

flex 布局

flex number
flexDirection enum('row', 'column') 方向
flexWrap enum('wrap', 'nowrap') 包裹方式
alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') 自身对齐方式
alignItems enum('flex-start', 'flex-end', 'center', 'stretch') 项目垂直对齐方式
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') 项目水平对齐方式

Transform 样式

Transform 在 css3 中有许多属性，在 RN 中也是根据 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}]

transform 是以数组的形式来设置属性，例如：

const styles = {
  myTransform: [ // 数组
    {
      rotate: '90deg'
    },
    {
      scale: 1.5
    }
  ]
}

shadow 样式

和css3的shadow-box属性类似，分开书写

shadowColor string
shadowOffset {width: number, height: number}
shadowOpacity number
shadowRadius number

结语

以上是react native 所支持的常见样式，如果你是前端相信能够快速上手，如果你没有前端基础，相信通过分类能够快速掌握。