如何在 React Native 中覆盖图像上方的文本条答案

【问题标题】：How to overlay Text Strip above Image in React Native如何在 React Native 中覆盖图像上方的文本条
【发布时间】：2021-03-09 08:39:43
【问题描述】：

我正在尝试在本机反应中覆盖图像视图上方的文本条。您在优惠卡上看到的那些。下面附上截图：

到目前为止，我只管理过这样的事情：

但这是非常微不足道的。矩形的右边缘也必须倾斜！

是否有任何库/组件可以做到这一点？我已经找遍了，但找不到一个。非常感谢任何形式的帮助！在此先感谢:)

【问题讨论】：

【解决方案1】：

我对 react-native 不熟悉，但据我所知，您可以将样式作为具有任何 css 属性的对象提供 CamelCase 表示法：您可以使用 clip-path 来切掉倾斜的部分。

// regular css
clip-path: polygon(0 0, 0 100%, 96% 100%, 100% 0);

在本机反应中

const styles = {
  theStrip: {
    clipPath: 'polygon(0 0, 0 100%, 96% 100%, 100% 0)',
  }
}
<div styles={styles.theStrip} />