以前、「【CSS】画像の左上隅に「NEW!!」の三角形を配置する方法」という記事を投稿しましたが、今回はそれを React Native で行う方法です。
参考にさせていただいた記事はこちらから。
The Shapes of React Native
https://codedaily.io/tutorials/22/The-Shapes-of-React-Native
完成形のスクリーンショットはこちら。
カードコンポーネントの右上の赤い三角形がそうです。
サンプルコードは下記のとおりです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | import React from 'react';import { View, Text, StyleSheet } from 'react-native';const styles = StyleSheet.create({ new: { position: 'absolute', transform: [{ rotate: '90deg'}], right: 0, width: 0, height: 0, backgroundColor: "transparent", borderStyle: "solid", borderRightWidth: 50, borderTopWidth: 50, borderRightColor: "transparent", borderTopColor: "red", }, newText: { position: 'absolute', right: 2, top: 8, transform: [{ rotate: '45deg'}], color: '#FFF', }});const NewLabel = () => ( <><View style={styles.new} /><Text style={styles.newText}>New!</Text></>);export default NewLabel; |
とりあえず上記をそのまま追加して貰えば、要素の右上に「New!」と書かれた赤い三角形が表示されるはずです。
実装手順は以上です！
なお、参考にさせていただいたサイトを見てみると、他にも星形や六角形など、様々な図形も描画できるようでした。
今のところ、使いどころはないのですが、いつか使う機会があれば、参考にさせていただきたいですね。
以上、React Native の View で三角形をつくる方法についてでした。
ご参考になれば幸いです。
