1. 首页首页
  2. 科技前沿科技前沿

reanct native样式大全

科技前沿 • • 阅读 40

reanct native样式大全目录 布局写法 React Native 样式指南 Properties 属性 Text 文本 Dimension 尺寸 Positioning 定位 Margin 外部白 Padding 内部白 Border 边框 Background 背景 Transform 转换 Flexbox 弹性盒 Other 其他

大家好，我是讯享网，很高兴认识大家。

目录

布局写法

React-Native 样式指南

Properties 属性

Text 文本

Dimension 尺寸

Positioning 定位

Margin 外部白

Padding 内部白

Border 边框

Background 背景

Transform 转换

Flexbox 弹性盒


讯享网

Other 其他

Valuse 取值

Color 颜色

Number 数值

Units 单位

Pt 点

 

布局写法

外联布局：style={styles.container}
内联布局：style={ {flex:1,width:50,height:100}}
多个布局：style={[styles.container,{width:50,height:100}]}

React-Native 样式指南

React-Native 的样式基本上是实现了 CSS 的一个子集，并且属性名不完全一致，所以当你开始在编写 React-Native 之前，可以先简要了解一下。

Properties 属性

Text 文本

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

Dimension 尺寸

属性名 取值 描述
width <number> 对应 CSS 中的 width 属性
height <number> 对应 CSS 中的 height 属性

Positioning 定位

属性名 取值 描述
position absolute, relative 对应 CSS 中的 position 属性，但**了 static, fixed 取值
top <number> 对应 CSS 中的 top 属性
right <number> 对应 CSS 中的 right 属性
bottom <number> 对应 CSS 中的 bottom 属性
left <number> 对应 CSS 中的 left 属性

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 边框

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

Flexbox 弹性盒

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

Other 其他

属性名 取值 描述
opacity <number> 对应 CSS 中的 opacity 属性
overflow visible, hidden 对应 CSS 中的 overflow 属性，但**了 scroll, auto 取值
elevationAndroid <number> CSS中没有对应的属性，只在 Android5.0+ 上有效
resizeMode cover, contain, stretch CSS中没有对应的属性，可以参考 background-size 属性
overlayColorAndroid string CSS中没有对应的属性，当图像有圆角时，将角落都充满一种颜色
tintColoriOS <color> CSS中没有对应的属性，iOS 图像上特殊的色彩，改变不透明像素的颜色

Valuse 取值

Color 颜色

  1. React-Native 支持了 CSS 中大部分的颜色类型：
  2. #f00 (#rgb)
  3. #f00c (#rgba)：CSS 中无对应的值
  4. #ff0000 (#rrggbb)
  5. #ff0000cc (#rrggbbaa)：CSS 中无对应的值
  6. rgb(255, 0, 0)
  7. rgba(255, 0, 0, 0.9)
  8. hsl(360, 100%, 100%)
  9. hsla(360, 100%, 100%, 0.9)
  10. transparent
  11. Color Name：支持了 基本颜色关键字 和 拓展颜色关键字，但不支持 28个系统颜色；

Number 数值

在 React-Native 中，目前仅支持 Number 这一种长度取值。默认缺省了 pt 单位，详细请看 Units 单位 部分。

Units 单位

Pt 点

在 React-Native 中，并不支持百分比单位，目前只支持一种单位，即 pt 绝对长度单位，同时，你在定义时不需要加单位，例如：

<View style={ 
  
    
  {width: 100, height: 50}}></View>

讯享网 
讯享网var styles = StyleSheet.create({ box: { width: 100, height: 50 } });

 

小讯
上一篇 2025-03-08 15:13
下一篇 2025-02-25 23:55

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/127177.html