如何在反應本機中對角切割圖像？

Question

嗨，大家好，我正在開發一個反應原生社交網絡應用程序。我想知道是否有可能削減<Image>在圖像中顯示的方式：

如果是的話，你能爲我提供一些例子或任何提示來實現這一點。

Reference for android

Answer 1

您可以顯示一個白色三角形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, 
 
    }, 
 
});