React Native 的样式基本上是实现了 CSS 的一个子集，针对 iOS、Android 阉割了一些功能，并且部分属性名不完全一致，下面是 React Native 所有的 CSS 样式。

下为0.58的正式版本

Text样式属性

属性名取值描述
color<color>对应 CSS color 属性
fontFamilystring对应 CSS font-family 属性
fontSize<number>对应 CSS font-size 属性
fontStylenormal, italic对应 CSS font-style 属性，但阉割了 oblique 取值
fontWeightnormal, bold 100~900对应 CSS font-weight 属性，但阉割了 bolder, lighter 取值
lineHeight<number>对应 CSS line-height 属性
textAlignauto, left, right, center, justifyiOS对应 CSS text-align 属性，但增加了 auto 取值。当取值为 justify 时，在 Android 上会变为 left
textDecorationLinenone, underline, line-through, underline line-through对应 CSS text-decoration-line 属性，但阉割了 overline, blink 取值
textShadowColor<color>对应 CSS text-shadow 属性中的颜色定义
textShadowOffset{
width:<number>,
height:<number>
}		对应 CSS text-shadow 属性中的阴影偏移定义
textShadowRadius<number>在 CSS 中，阴影的圆角大小取决于元素的圆角定义，不需要额外定义
includeFontPadding
Android		<bool>Android 在默认情况下会为文字额外保留一些 padding，以便留出空间摆放上标或是下标的文字。对于某些字体来说，这些额外的 padding 可能会导致文字难以垂直居中。如果你把 textAlignVertical 设置为 center 之后，文字看起来依然不在正中间，那么可以尝试将本属性设置为 false
textAlignVertical
Android		auto, top, bottom, center对应 CSS vertical-align 属性，增加了 auto 取值，center 取代了 middle，并阉割了 baseline, sub 等值
fontVariant
iOS		small-caps, oldstyle-nums, lining-nums, tabular-nums, proportional-nums对应 CSS font-variant 属性，但取值更丰富
letterSpacing
iOS		<number>对应 CSS letter-spacing 属性
textDecorationColor
iOS		<color>对应 CSS text-decoration-color 属性
textDecorationStyle
iOS		solid, double, dotted, dashed对应 CSS text-decoration-style 属性，但阉割了 wavy 取值
textTransformnone，uppercase，lowercase，capitalize对应 CSS text-transform 属性，不支持 CSS3中 full-width 的取值
writingDirection
iOS		auto, ltr, rtl对应 CSS direction 属性，增加了 auto 取值

Dimension 尺寸

属性名取值描述
width<number>对应 CSS width 属性
minWidth<number>对应 CSS min-width 属性
maxWidth<number>对应 CSS max-width 属性
height<number>对应 CSS height 属性
minHeight<number>对应 CSS min-height 属性
maxHeight<number>对应 CSS max-height 属性

Position 定位

属性名取值描述
positionabsolute, relative对应 CSS position 属性，但阉割了 static, fixed 取值
top<number>对应 CSS top 属性
right<number>对应 CSS right 属性
bottom<number>对应 CSS bottom 属性
left<number>对应 CSS left 属性
zIndex<number>对应 CSS z-index 属性

Margin 外部白

属性名取值描述
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 属性

Padding 内部白

属性名取值描述
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 属性

Border 边框

属性名取值描述
borderStylesolid, 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 属性
shadowColor<color>对应 CSS box-shadow 属性中的颜色定义
shadowOffset{
width: <number>,
height: <number>
}		对应 CSS box-shadow 属性中的阴影偏移定义
shadowRadius<number>在 CSS 中，阴影的圆角大小取决于元素的圆角定义，不需要额外定义
shadowOpacity<number>对应 CSS box-shadow 属性中的阴影透明度定义

Background 背景

属性名取值描述
backgroundColor<color>对应 CSS background-color 属性

Transform 转换

属性名取值描述
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 属性
transformMatrixTransformMatrixPropType类似于 CSS 中 transform 属性的 matrix() 和 matrix3d() 函数
backfaceVisibilityvisible, hidden对应 CSS backface-visibility 属性

Flexbox 弹性盒

属性名取值描述
flex<number>对应 CSS flex 属性，但只能为整数值
flexGrow<number>对应 CSS flex-grow 属性
flexShrink<number>对应 CSS flex-shrink 属性
flexBasis<number>对应 CSS flex-basis 属性
flexDirectionrow, row-reverse, column, column-reverse对应 CSS flex-direction 属性
flexWrapwrap, nowrap对应 CSS flex-wrap 属性，但阉割了 wrap-reverse 取值
justifyContentflex-start, flex-end, center, space-between, space-around对应 CSS justify-content 属性，但阉割了 stretch 取值。
alignItemsflex-start, flex-end, center, stretch对应 CSS align-items 属性，但阉割了 baseline 取值。
alignSelfauto, flex-start, flex-end, center, stretch对应 CSS align-self 属性，但阉割了 baseline 取值

Other 其他

属性名取值描述
opacity<number>对应 CSS opacity 属性
overflowvisible, hidden, scroll对应 CSS overflow 属性，但阉割了 auto 取值
elevation
Android		<number>CSS 中没有对应的属性，只在 Android5.0+ 上有效
resizeModecover, contain, stretchCSS 中没有对应的属性，可以参考 background-size 属性
overlayColor
Android		stringCSS 中没有对应的属性，当图像有圆角时，将角落都充满一种颜色
tintColor
iOS		<color>CSS 中没有对应的属性，iOS 图像上特殊的色彩，改变不透明像素的颜色

Color 颜色

React Native 支持了 CSS 中大部分的颜色类型：

  • #f00 (#rgb)
  • #f00c (#rgba)：CSS 中无对应的值
  • #ff0000 (#rrggbb)
  • #ff0000cc (#rrggbbaa)：CSS 中无对应的值
  • rgb(255, 0, 0)
  • rgba(255, 0, 0, 0.9)
  • hsl(360, 100%, 100%)
  • hsla(360, 100%, 100%, 0.9)
  • transparent
  • 0xff00ff00 (0xrrggbbaa)：CSS 中无对应的值
  • Color Name：支持了 基本颜色关键字 和 拓展颜色关键字，但不支持 28 个系统颜色；

优先级与继承（Specificity and inheritance）

组件的引入样式的优先级高于全局样式的优先级。

选择器

  1. 基本选择器只支持类选择器
  2. 不支持组合选择器的写法
  3. 不支持伪类及伪元素
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

Flutter 鸿蒙化实战：flutter_keychain 适配 OpenHarmony，密钥安全存储

随着鸿蒙生态的快速发展，越来越多的 Flutter 应用需要适配 OpenHarmony 平台。但生态早期，大量常用三方库只有 Android / iOS 实现，鸿蒙侧只能自己造轮子。为了解决这个问题，对一批高频使用的 Flutter 三方库做了 OpenHarmony 平台适配，统一托管在 GitCode 的下，全部通过 TAG 版本隔离、配套门禁编译验证，开箱即用。本篇是系列文章之一，主角是—

avatar 开源鸿蒙跨平台开发者社区

Flutter 鸿蒙化实战：flutter_lifecycle_detector 适配 OpenHarmony，前后台切换监听

随着鸿蒙生态的快速发展，越来越多的 Flutter 应用需要适配 OpenHarmony 平台。但生态早期，大量常用三方库只有 Android / iOS 实现，鸿蒙侧只能自己造轮子。为了解决这个问题，对一批高频使用的 Flutter 三方库做了 OpenHarmony 平台适配，统一托管在 GitCode 的下，全部通过 TAG 版本隔离、配套门禁编译验证，开箱即用。本篇是系列文章之一，主角是—

avatar 开源鸿蒙跨平台开发者社区

React Native 三方库鸿蒙化实战：react-native-webp-format 适配全记录（含 4 个深坑复盘）

调研先行：先查鸿蒙原生能力是否已覆盖库的核心功能（本例中 ArkUI 原生支持 WebP，省掉了整个解码器实现）；再查 oh-react-native 组织的已有适配清单，避免重复劳动JS API 零改动是金标准：平台差异全部消化在原生侧，使用方无感知宿主五件套一个不能少：RNAbility、RNApp、C++ 胶水层、oh-package 依赖、harmony metro configmodul

avatar 开源鸿蒙跨平台开发者社区