在React Native中的图像顶部创建一个旋转的文本横幅(trapezoid)

Question

如何制作旋转横幅的方式与Tidal在此处的方式相同

我已经尝试制作一个梯形并根据http://browniefed.com/blog/the-shapes-of-react-native/将其旋转45度,然后在其上面放置一个旋转的文本,但这是非常困难的使其与边界对齐.

var Trapezoid = React.createClass({
  render: function() {
    return (
      <View style={styles.trapezoid} />
    )
  }
})

trapezoid: {
  width: 200,
  height: 0,
  borderBottomWidth: 100,
  borderBottomColor: 'red',
  borderLeftWidth: 50,
  borderLeftColor: 'transparent',
  borderRightWidth: 50,
  borderRightColor: 'transparent',
  borderStyle: 'solid'
} 

我还考虑过制作第一个大三角形,然后在顶部制作一个较小的三角形(隐藏大三角形的一部分),这样只有横幅可见,然后放置一个旋转的文本,但由于后面的图像不是实心的彩色,不可能选择隐藏较大三角形的较小三角形的背景颜色.

最简单的必须是这样的

<View style={{
  transform: [{ rotate: '-30deg'}],
  marginLeft: 5,
  marginTop: 5,
  backgroundColor: 'lightblue',
  borderTopWidth: 1,
  borderBottomWidth: 1,
  borderColor: '#fff',
  paddingVertical: 1,
  paddingHorizontal: 20,
  marginLeft: -15,
  marginTop: 8
}}>
  <Text style={{
    backgroundColor: 'transparent', color: '#111', fontSize: 10,
    fontWeight: 'bold' }}>EXCLUSIVE</Text>
</View>

但是我必须根据文字的大小手动改变位置,矩形的边框会突出图片.

Answer 1

您可以实现以下内容：

.banner{
  position: absolute;
  transform: rotate(45deg);
  top: 15px;
  right: -40px;
  padding: 5px 50px; 
  background-color: red;
}
.view{
  overflow: hidden;
  position: relative;
  width: 250px;
}
img{
  width: 100%;
}

<div class="view">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/1200px-Unofficial_JavaScript_logo_2.svg.png" alt="js">
    <div class="banner">banner</div>
</div>

我已经尝试过使用react-native：

class ImageWithBanner extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.view}>
                    <Image
                        style={styles.image}
                        source={{
                            uri:
                                'https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/1200px-Unofficial_JavaScript_logo_2.svg.png'
                        }}
                    />
                    <View style={styles.banner}>
                        <Text>banner</Text>
                    </View>
                </View>
                <Button
                    title="Tap to reload items"
                    onPress={() => this.getData('boobs')}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    view: {
        overflow: 'hidden',
        position: 'relative',
        width: 250,
        height: 200
    },
    image: {
        width: '100%',
        height: '100%'
    },
    banner: {
        position: 'absolute',
        backgroundColor: 'red',
        transform: [{ rotate: '45deg' }],
        top: 15,
        right: -40,
        paddingTop: 5,
        paddingBottom: 5,
        paddingLeft: 50,
        paddingRight: 50
    }
});