我如何在 React native 中切断视图的边框连接

Question

我正在用 React Native 开发应用程序。在应用程序中，我们有一个带有左下角和右上角切割的渐变按钮。我不知道如何实现它。给我一些例子或任何提示来实现这个。谢谢

Answer 1

您可以使用 clip-path 属性 来指示要在元素中显示的部分，使用 polygon() 函数创建六边形角。下面的代码应该可以解决问题。

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#522d5b',
    clipPath: `polygon(0 0, 83% 0, 100% 20%, 100% 100%, 19% 100%, 0 79%)`
  }
});

要玩转角的精确值，您可以参考this link to create clip paths