创建一个旋转的文字条幅（梯形）的反应原住民

我怎样才能使一个旋转的旗帜一样潮汐在这里所做的创建一个旋转的文字条幅（梯形）的反应原住民

我试图做一个梯形，其旋转按照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>

不过那时候我也根据文本的大小手动改变位置，和矩形的边框将伸出的图片。

来源

2017-08-31 Jamgreen

您可以实现这样的事情：

.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>

我试着反应母语：

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

来源

2017-09-02 13:31:12 Andrew

但我能够使用'overflow：hidden'in反应原生吗？ – Jamgreen

是的，[与反应原生支持样式的存储库]（https://github.com/vhpoet/react-native-styling-cheat-sheet#view）。 'View'和'ScrollView'支持这个属性。 – Andrew

我试图将这作为react-native应用程序的一部分来实现。看起来像你想要的。 – Andrew

这似乎是工作，与绝对的位置，变换旗帜类中编，而不是转化的观点或image：

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

，或者取决于你想如何嵌入在HTML表你的类，以及如何比例大小，

.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%; 
}

来源

2017-09-08 23:46:46 mrmaclean89

创建一个旋转的文字条幅（梯形）的反应原住民

回答

相关问题