Tạo banner chữ xoay (hình thang) trên đầu trang của hình ảnh trong React Native

Question

Làm thế nào tôi có thể làm cho một biểu ngữ xoay theo cùng một cách như thủy triều không đây

Tôi đã cố gắng thực hiện một hình thang và xoay nó 45 độ theo http://browniefed.com/blog/the-shapes-of-react-native/ và sau đó đặt văn bản được xoay lên trên nó, nhưng rất khó để làm cho nó phù hợp với các đường viền.

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

Tôi cũng đã nghĩ về việc đầu tiên một tam giác lớn và sau đó một hình tam giác nhỏ trên đầu trang (che giấu một phần của tam giác lớn), như vậy mà chỉ có biểu ngữ có thể nhìn thấy, và sau đó đặt một chữ xoay, nhưng vì hình ảnh phía sau không phải là màu đồng nhất, nên không thể chọn màu nền cho hình tam giác nhỏ hơn sẽ ẩn hình tam giác lớn hơn.

Các dễ nhất phải có một cái gì đó như thế này

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

nhưng sau đó tôi phải thay đổi vị trí một cách thủ công theo kích thước của văn bản, và biên giới của hình chữ nhật sẽ dính ra khỏi bức tranh.

Answer 1

Bạn có thể thực hiện một cái gì đó như thế này:

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

Tôi đã thử với phản ứng bản địa:

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

Answer 2

Điều này dường như làm việc, với một vị trí tuyệt đối, biến đổi ed trong lớp biểu ngữ, chứ không phải là chuyển đổi quan điểm hoặc hình ảnh:

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

OR, tùy thuộc vào cách bạn muốn nhúng lớp học của bạn trong bảng HTML của bạn, và làm thế nào bạn có tỷ lệ kích thước,

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