React Native：更改 TouchableOpacity 一个角的颜色

如何解决React Native：更改 TouchableOpacity 一个角的颜色

我正在开发适用于 iPad 的 React Native 应用。

我需要制作一个带有不同颜色的角的按钮。按钮是一个矩形，但右上角需要有一个不同颜色的三角形。

我尝试使用半径，但这会产生圆角。我需要它是直的。

我尝试创建一个不同颜色的矩形，旋转它并将其放在我的可触摸不透明度之上，但我看到了整个矩形，溢出：“隐藏”不起作用。

这是我的代码：

export const Template = ({backgroundColor,title,icon}) => {
  return (
    <>
      <TouchableOpacity style={[{backgroundColor},styles.headerWrapper]}>
      <View style={styles.sessionReady}></View>
        <View style={styles.iconContainer}>
          <Image source={icon}></Image>
        </View>
        <Text style={styles.startButtonTitle}>{title}</Text>
      </TouchableOpacity>
    </>
  );
};

export default StyleSheet.create({
  headerWrapper: {
    flex: 1,padding: 30,borderRadius: 8,marginTop: 30,justifyContent: 'flex-start',flexDirection: 'row',alignItems: 'center',},startButtonTitle: {
    color: colorsPalette.white,fontSize: 35,fontWeight: '700',// fontFamily: 'Lato',cornerButton: {
    height: 10,borderTopWidth: 10,borderRightWidth: 10,borderColor: 'transparent',borderStyle: 'solid',iconContainer: {
    width: 135,height: 40,justifyContent: 'center',sessionReady: {
    flex: 1,position: 'absolute',overflow: 'hidden',right: -100,top: -100,backgroundColor: colorsPalette.lightRed,width: 300,height: 150,transform: [{rotate: '45deg'}],});

this image will help you understand

我做错了吗？还有其他方法可以实现吗？