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

Question

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

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

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

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

Answer 1

I'm not familiar with react-native but as far as I read you can provide styles as an object with any css property in camelCase notation: You can use clip-path to cut away the slanted part.

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

在 react-native

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

延伸阅读