【React Native】Viewコンポーネントで三角形を作る

以前、「【CSS】画像の左上隅に「NEW!!」の三角形を配置する方法」という記事を投稿しましたが、今回はそれを React Native で行う方法です。

参考にさせていただいた記事はこちらから。

The Shapes of React Native
https://codedaily.io/tutorials/22/The-Shapes-of-React-Native

完成形のスクリーンショットはこちら。

カードコンポーネントの右上の赤い三角形がそうです。

サンプルコードは下記のとおりです。

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 で三角形をつくる方法についてでした。
ご参考になれば幸いです。