創建一個旋轉的文字條幅（梯形）的反應原住民

我怎樣才能使一個旋轉的旗幟一樣潮汐在這裏所做的創建一個旋轉的文字條幅（梯形）的反應原住民

我試圖做一個梯形，其旋轉按照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

創建一個旋轉的文字條幅（梯形）的反應原住民

回答

相關問題