Question

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

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

Answer 1

将其应用于您的样式标记，不要忘记从“ react-native”导入尺寸

'redis' => [

    'client' => 'predis',

    'default' => [
        'host' => env('REDIS_HOST', 'localhost'),
        'password' => env('REDIS_PASSWORD', null),
        'port' => env('REDIS_PORT', 6379),
        'database' => 0,
    ],

],

Answer 2

非常古老的帖子，但是我找到了一个解决方案，我使用内联样式作为更简单的示例：

 <ImageBackground
            style={{
              left: 0,
              width: Dimensions.get('window').width - 10,
              height: 220,
              justifyContent: 'center', alignSelf: 'center'
            }}
            source={{ uri: header.banner }}></ImageBackground>
          <View style={{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: 0,
            height: 0,
            backgroundColor: 'transparent',
            borderStyle: 'solid',
            borderRightWidth: Dimensions.get('window').width,
            borderLeftWidth: 0,
            borderBottomWidth: 100,
            borderLeftColor: 'transparent',
            borderRightColor: 'transparent',
            borderBottomColor: '#fff',
          }} />

Answer 3

您可以在图片顶部显示形状为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,
  },
});

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

3 个答案: