Я хочу сделать несколько угловых рамок View в React Native

Question

Я хочу сделать View, как это, но я не могу сделать угловую рамку T.T Я не очень хорошо в css, пожалуйста, вы можете мне помочь? Я попробовал этот код.

import * as React from 'react';
import { StyleSheet, View, ViewStyle } from 'react-native';

export interface CuttedComponentProps {
  cuttedComponentWidth: number;
  cuttedComponentHeight: number;
  style?: ViewStyle | ViewStyle[];
  backgroundColor: string;
  zIndex?: number;
  borderBottom?: boolean;
}

class CuttedComponent extends React.Component<CuttedComponentProps> {
  constructor(props: CuttedComponentProps) {
    super(props);
  }

  public render() {
    const {
      style,
      cuttedComponentWidth,
      cuttedComponentHeight,
      backgroundColor,
      zIndex,
      borderBottom,
      children
    } = this.props;
    return (
      <View style={style}>
        <View
          style={{
            position: 'absolute',
            left: borderBottom ? -StyleSheet.hairlineWidth : 0,
            top: borderBottom ? -StyleSheet.hairlineWidth : 0,
            zIndex: zIndex && zIndex + 0.5,
            width: 0,
            height: 0,
            borderStyle: 'solid',
            borderRightWidth: cuttedComponentHeight,
            borderTopWidth: cuttedComponentWidth,
            borderRightColor: 'transparent',
            borderTopColor: backgroundColor
          }}
        />
        {children}
      </View>
    );
  }
}
export default CuttedComponent;

и я попробовал этот код, но он (граница) не отображается в угловом углу.