英文:
How to create a corner ribbon on react native?
问题
我卡在创建卡片上的角标上。之前我使用react-native-svg库来完成这个任务，但是库存在问题。我如何在不使用任何库的情况下完成它？有没有办法通过CSS来做到这一点？
这个角标看起来像这样。
英文:
I'm stuck on creating a corner ribbon on a card. Before I used react-native-svg library to do this task. but having an issue with the library. How can I do it without using any library? is there a way to do it from CSS?
the ribbon is look like this.
答案1
得分: 0
以下是您要翻译的代码部分：
const Banner = ({message, style}) => {
return (
<Text style={[styles.banner, style]}>
{message}
</Text>
);
};
const styles = StyleSheet.create({
banner: {
position: 'absolute',
right: -40,
top: 20,
width: 160,
transform: [{ rotate: "45deg" }],
backgroundColor: 'black',
color: 'white',
padding: 8,
textAlign: 'center',
},
});
const App = () => {
return (
<>
<Image
source={{uri: 'https://picsum.photos/1080/1920'}}
resizeMode="cover"
style={{width: '100%', height: '100%'}}
/>
<Banner
message="PREMIUM"
style={{
color: 'black',
backgroundColor: 'yellow',
fontWeight: 'bold',
}}
/>
</>
)
}
详情请参考Transforms。
英文:
Use absolute position for placement and transform to rotate. Something like this:
const Banner = ({message, style}) => {
return (
<Text style={[styles.banner, style]}>
{message}
</Text>
);
};
const styles = StyleSheet.create({
banner: {
position: 'absolute',
right: -40,
top: 20,
width: 160,
transform: [{ rotate: "45deg" }],
backgroundColor: 'black',
color: 'white',
padding: 8,
textAlign: 'center',
},
});
const App = () => {
return (
<>
<Image
source={{uri: 'https://picsum.photos/1080/1920'}}
resizeMode="cover"
style={{width: '100%', height: '100%'}}
/>
<Banner
message="PREMIUM"
style={{
color: 'black',
backgroundColor: 'yellow',
fontWeight: 'bold',
}}
/>
</>
)
}
See Transforms for details.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论