如何在React Native中不依赖库实现卡片角标丝带效果？

Web端纯CSS实现 #

完全可以用CSS实现你要的右上角倾斜丝带角标，示例代码如下：

HTML结构

<div class="card">
  <span class="ribbon">NEW</span>
  <!-- 卡片内容区域 -->
</div>

CSS样式

.card {
  position: relative;
  width: 300px;
  height: 200px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* 裁剪丝带超出卡片的部分 */
}

.ribbon {
  position: absolute;
  top: 10px;
  right: -30px;
  background-color: #ff4757;
  color: #fff;
  padding: 3px 30px;
  font-size: 14px;
  font-weight: 700;
  transform: rotate(45deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

通过绝对定位+旋转变换模拟丝带倾斜效果，修改top、right、旋转角度及配色可快速调整样式。

React Native无库实现 #

React Native中可以通过StyleSheet结合变换属性实现，不需要依赖任何SVG库，示例组件代码：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const RibbonCard = () => {
  return (
    <View style={styles.card}>
      <View style={styles.ribbon}>
        <Text style={styles.ribbonText}>NEW</Text>
      </View>
      <View style={styles.cardContent}>
        <Text>卡片内容</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    width: 300,
    height: 200,
    backgroundColor: '#fff',
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 3, // 安卓阴影适配
    position: 'relative',
    overflow: 'hidden',
  },
  ribbon: {
    position: 'absolute',
    top: 10,
    right: -30,
    backgroundColor: '#ff4757',
    paddingHorizontal: 30,
    paddingVertical: 3,
    transform: [{ rotate: '45deg' }],
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
  },
  ribbonText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: 'bold',
  },
  cardContent: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default RibbonCard;

关键说明：

• 用position: absolute将丝带定位到卡片右上角，通过rotate变换实现倾斜
• overflow: hidden确保卡片不会显示丝带超出的部分
• 阴影属性分别适配iOS和安卓的显示效果，可根据需求调整参数

内容的提问来源于stack exchange，提问作者kdam