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

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'
} 

我也想过先做一个大三 Angular 形，然后在上面做一个小三 Angular 形(隐藏大三 Angular 形的一部分)，这样只有横幅是可见的，然后放置一个旋转的文本，但是由于后面的图像不是纯色，无法为隐藏较大三 Angular 形的较小三 Angular 形选择背景颜色。

最简单的一定是这样的

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