How can I cut image diagonally in react-native?

问题

Hi guys I am developing a social networking app in react-native. I wanted to know if it is possible to cut <Image> in the way shown in the image:

If yes, can you provide me some example or any hints to implement this.

Reference for android

回答1:

apply this to your style tag of view,don forgot to import Dimensions from 'react-native'

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

回答2:

You could display a white triangle shaped View on top of your image

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,
  },
});

来源：https://stackoverflow.com/questions/43048034/how-can-i-cut-image-diagonally-in-react-native