我们如何设计反应原生的箭牌

Question

我正在开发一个示例应用程序，在此应用程序中需要使用Arrow卡来提供显示卡。  我尝试了反应原生的形状，但我没有得到输出。

假设提供的文本自动增加，箭头设计形状也会增加

这是我的代码：

<View style={styles.container}>
                <View style={{ flex: 0.1, backgroundColor: "blue" }} />
                <View
                    style={{
                        flex: 0.9,
                        backgroundColor: "green",
                        justifyContent: "center",
                        alignItems: "center"
                    }}
                >
                    <View style={styles.baseTop} />
                    <View style={styles.baseBottom} />
                </View>
            </View>
baseTop: {
    borderBottomWidth: 35,
    borderBottomColor: "red",
    borderLeftWidth: 50,
    borderLeftColor: "transparent",
    borderRightWidth: 50,
    borderRightColor: "transparent",
    height: 0,
    width: 0,
    left: 0,
    top: -35,
    position: "absolute"
},
baseBottom: {
    backgroundColor: "red",
    height: 55,
    width: 100
}

这里我需要这种类型的图像，这里引用了Image：

Answer 1

这就是我实现的方式与您的图像几乎相同。

:)

Expo链接https://snack.expo.io/rycpKiAe7

Answer 2

你可以制作一个弹性正方形，用Transform旋转它，然后将它绝对放在适当的位置。

或者你可以使用react-native-svg创建一个SVG，然后相应地定位它。