react native 画三角形

在 React Native 中，可以使用 `View` 组件来实现画三角形的效果。具体实现步骤如下：

1. 创建一个 `View` 组件，并设置它的宽度、高度和背景色。

2. 使用 `transform` 属性对该组件进行旋转，以便实现三角形的形状。

3. 使用 `borderWidth` 和 `borderColor` 属性设置该组件的边框宽度和颜色，以便实现三角形的边框效果。

以下是一个简单的例子：

import React from 'react';
import { View } from 'react-native';

const Triangle = ({ size, color }) => {
  return (
    <View
      style={{
        width: 0,
        height: 0,
        backgroundColor: 'transparent',
        borderStyle: 'solid',
        borderLeftWidth: size / 2,
        borderRightWidth: size / 2,
        borderBottomWidth: size,
        borderLeftColor: 'transparent',
        borderRightColor: 'transparent',
        borderBottomColor: color,
        transform: [{ rotate: '180deg' }],
      }}
    />
  );
};

export default Triangle;

在上面的代码中，我们定义了一个名为 `Triangle` 的组件，它接收两个属性：`size` 和 `color`，分别表示三角形的大小和颜色。

在组件的样式中，我们使用了 `borderWidth` 和 `borderColor` 属性来设置三角形的边框，同时使用 `transform` 属性对该组件进行旋转，以便实现三角形的形状。

最后，我们导出该组件，并在其他组件中使用它即可。例如：

import React from 'react';
import { View } from 'react-native';
import Triangle from './Triangle';

const MyComponent = () => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Triangle size={50} color="red" />
    </View>
  );
};

export default MyComponent;

在上面的代码中，我们在一个普通的 `View` 组件中使用了 `Triangle` 组件，并传入了 `size` 和 `color` 属性。最终呈现出来的效果就是一个红色的三角形。