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

萧寂2024-04-11 18:21

js 复制代码

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（颜色）作为属性来指定三角形的样式参数使用

js 复制代码

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" />
	)
}

效果图