RN封装三角形组件(只支持上下箭头)

import React from 'react';
import { View, StyleSheet } from 'react-native';const Triangle = ({ direction, width, height, color }) => {// 根据方向选择三角形的样式const triangleStyle =direction === 'up'? {borderTopWidth: 0,borderBottomWidth: height,borderLeftWidth: width / 2,borderRightWidth: width / 2,borderTopColor: 'transparent',borderBottomColor: color,borderLeftColor: 'transparent',borderRightColor: 'transparent',}: {borderTopWidth: height,borderBottomWidth: 0,borderLeftWidth: width / 2,borderRightWidth: width / 2,borderTopColor: color,borderBottomColor: 'transparent',borderLeftColor: 'transparent',borderRightColor: 'transparent',};return <View style={[styles.triangle, triangleStyle]} />;
};const styles = StyleSheet.create({triangle: {width: 0,height: 0,backgroundColor: 'transparent',borderStyle: 'solid',},
});export default Triangle;

direction（方向）、size（大小）和 color（颜色）作为属性来指定三角形的样式参数
使用

import Triangle from './uitl.js'export default function App(){return(//红色向上箭头,尺寸20<Triangle direction="up" width={20} height={10} color="red" />// 蓝色向下箭头,尺寸20<Triangle direction="down" width={20} height={10} color="blue" />)
}