通过样式将矩形视图更改为四边形视图-react native

Question

通过样式将矩形视图更改为四边形视图

我需要在视图中显示四边形背景。如果可以通过样式完成，那就太好了。否则，我将使用图像作为背景。但我不想这样做，因为它也会增加应用程序的大小。

<View>
    <Image source={{uri: 'https://previews.123rf.com/images/jaboy/jaboy1706/jaboy170600065/79609763-new-green-light-scenery-background.jpg'}}
      style={{width:200, height: 70 }} />
    <View style={{ backgroundColor: 'red', padding: 10, paddingTop: 25 }}>
      <Text style={styles.red}>just red</Text>
      <Text style={styles.bigBlue}>just bigBlue</Text>
      <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
      <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
    </View>
</View>

现在的样子

我希望它看起来如何

Answer 1

您可以通过使用2个视图来实现。

  <View>
    <View
      style={{
        backgroundColor: 'transparent',
        borderStyle: 'solid',
        borderLeftWidth: 200,
        borderTopWidth: 30,
        borderLeftColor: 'red',
        borderTopColor: 'transparent',
      }}
    />
    <View style={{ height: 70, width: 200, backgroundColor: 'red' }}>
      <Text>A</Text>
    </View>
  </View>