如何在 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} />

延伸閱讀