React native 反应本机：更改TouchableOpacity一角的颜色

我在一个iPad的React原生应用程序中工作

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

我试过半径，但这是一个圆角。我需要它是直的

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

这是我的密码：

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,
    alignItems: 'center',
    justifyContent: 'center',
  },
  sessionReady: {
    flex: 1,
    position: 'absolute',
    overflow: 'hidden',
    right: -100,
    top: -100,
    backgroundColor: colorsPalette.lightRed,
    width: 300,
    height: 150,
    transform: [{rotate: '45deg'}],
  },
});