如何在反应原生中对角切割图像？

Question

大家好我正在开发一个反应原生的社交网络应用程序。我想知道是否有可能以图像中显示的方式切割<Image>：

如果是，您能否提供一些示例或任何提示来实现此目的。

Reference for android

Answer 1

将此应用于您的样式标记视图，不要忘记从'react-native'导入维度

triangleCorner: {
        left:0,
        height: 200,
        backgroundColor: 'green',
        borderStyle: 'solid',
        borderLeftWidth:Dimensions.get('window').width,
        borderBottomWidth: 80,
        borderLeftColor: 'transparent',
        borderBottomColor: 'white'
      }

Answer 2

您可以在图像上方显示白色三角形View

import React from 'react';
import { StyleSheet, View, Image, Dimensions } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Image style={styles.img} source={require('./images.jpg')}  >
        <View style={[styles.triangle]} /></Image>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  triangle: {
    position: 'absolute',
    right: 0,
    bottom: 0,
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderLeftWidth: Dimensions.get('window').width,
    borderRightWidth: 0,
    borderBottomWidth: 50,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: '#fff',
  },
  img: { 
    width: Dimensions.get('window').width,
  },
});