React native 带有向上箭头三角形|的背景边框视图

我需要像这样创建背景视图-

带边框的背景视图必须具有向上箭头三角形

这是我当前的代码片段-

<View style={{ width: '100%', paddingLeft: basePadding, paddingRight: basePadding }}>
      <View style={{width: '100%', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', flex: 1}}>
        <View style={{
          marginTop: 10,
          width: horizScale(30),
          borderBottomWidth: StyleSheet.hairlineWidth,
          borderColor: Colors.fire,
          height: 1
        }}/>
        <View style={{
          flex: 1,
          marginTop: 10,
          marginLeft: horizScale(20),
          borderBottomWidth: StyleSheet.hairlineWidth,
          borderColor: Colors.fire,
          height: 1
        }}/>
      </View>
      <View style={{width: '100%', borderLeftWidth: StyleSheet.hairlineWidth, borderRightWidth: StyleSheet.hairlineWidth, borderBottomWidth: StyleSheet.hairlineWidth, borderColor: Colors.fire, backgroundColor: '#FEF6F7', padding: horizScale(20)}}>
      <Text style={{color: '#403F41'}}>
        {' Test Test Test Test test'}
      </Text>
        <View style={{ flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'flex-start',
          marginTop: horizScale(10),
          width: '100%'}}>
          <TouchableOpacity onPress={() => {

          }}
                            style={{
                              backgroundColor: Colors.fire,
                              flex: 1,
                              alignItems: 'center',
                              justifyContent: 'center',
                              height: horizScale(40),
                              borderRadius: 3,
                              marginRight: horizScale(10)
                            }}>
            <HeavyText style={{ fontSize: horizScale(14), color: '#FFF' }}>{'CANCEL'}</HeavyText>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => {

          }}
                            style={{
                              backgroundColor: primaryColor,
                              flex: 1,
                              alignItems: 'center',
                              marginLeft: horizScale(10),
                              justifyContent: 'center',
                              height: horizScale(40),
                              borderRadius: 3
                            }}>
            <HeavyText style={{ fontSize: horizScale(14), color: '#FFF' }}>{'RE-BOOK'}</HeavyText>
          </TouchableOpacity>
        </View>
      </View>
    </View>

{“测试”}
{
}}
风格={{
背景颜色：Colors.fire，
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
高度：水平刻度（40），
边界半径：3，
右图：水平标尺（10）
}}>
{'CANCEL'}
{
}}
风格={{
背景色：原色，
弹性：1，
对齐项目：“居中”，
边缘左：水平标尺（10），
为内容辩护：“中心”，
高度：水平刻度（40），
边界半径：3
}}>
{RE-BOOK'}

JSX:

   <View style={styles.box}>
       <View style={styles.triangle}>
   </View>   

box:{
    width:100,
    height:100,
    backgroundColor:"lightblue",
    position:"relative"
  },
  triangle:{
    width:10,
    height:10,
    position:"absolute",
    top:-10,
    left:20,
    borderLeftWidth:10,
    borderLeftColor:"transparent",
    borderRightWidth:10,
    borderRightColor:"transparent",
    borderBottomWidth:10,
    borderBottomColor:"red"
  }

结果如下：

---

您可以通过玩

width

和

height

来更改三角形的大小。另外，如果您想更改位置，请尝试使用

三角形的
顶部和
左侧属性

   <View style={styles.box}>
       <View style={styles.triangle}>
   </View>   

box:{
    width:100,
    height:100,
    backgroundColor:"lightblue",
    position:"relative"
  },
  triangle:{
    width:10,
    height:10,
    position:"absolute",
    top:-10,
    left:20,
    borderLeftWidth:10,
    borderLeftColor:"transparent",
    borderRightWidth:10,
    borderRightColor:"transparent",
    borderBottomWidth:10,
    borderBottomColor:"red"
  }

结果如下：



您可以通过玩
width
和
height
来更改三角形的大小。此外，如果您想更改位置，请尝试使用
三角形的
顶部
和
左侧
属性添加两个三角形，一个用于背景色，一个用于边框色


完整代码

import React, { Component } from "react";
import { View, StyleSheet } from "react-native";

export default class Dashboard extends Component {
  render() {
    return (
      <View style={styles.box}>
        <View style={styles.triangle} />
        <View style={styles.triangle2} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  box: {
    width: 300,
    height: 100,
    backgroundColor: "#fef6f7",
    position: "relative",
    margin: 50,
    borderColor: "red",
    borderWidth: 1
  },
  triangle: {
    width: 10,
    height: 10,
    position: "absolute",
    top: -10,
    left: 20,
    borderLeftWidth: 10,
    borderLeftColor: "transparent",
    borderRightWidth: 10,
    borderRightColor: "transparent",
    borderBottomWidth: 10,
    borderBottomColor: "red"
  },
  triangle2: {
    width: 10,
    height: 10,
    position: "absolute",
    top: -10,
    left: 21,
    borderLeftWidth: 9,
    borderLeftColor: "transparent",
    borderRightWidth: 9,
    borderRightColor: "transparent",
    borderBottomWidth: 9,
    borderBottomColor: "#fef6f7"
  }
});


import React，{Component}来自“React”；
从“react native”导入{View，StyleSheet}；
导出默认类仪表板扩展组件{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
方框：{
宽度：300，
身高：100，
背景颜色：“fef6f7”，
职位：“相对”，
差额：50，
边框颜色：“红色”，
边框宽度：1
},
三角形：{
宽度：10，
身高：10，
位置：“绝对”，
前-10名，
左:20,，
边线宽度：10，
borderLeftColor:“透明”，
边框宽度：10，
borderRightColor:“透明”，
边界宽度：10，
颜色：“红色”
},
三角形2：{
宽度：10，
身高：10，
位置：“绝对”，
前-10名，
左：21，
边线宽度：9，
borderLeftColor:“透明”，
边框宽度：9，
borderRightColor:“透明”，
边界宽度：9，
borderBottomColor:#fef6f7”
}
});
添加两个三角形，一个用于背景色，一个用于边框色


完整代码

import React, { Component } from "react";
import { View, StyleSheet } from "react-native";

export default class Dashboard extends Component {
  render() {
    return (
      <View style={styles.box}>
        <View style={styles.triangle} />
        <View style={styles.triangle2} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  box: {
    width: 300,
    height: 100,
    backgroundColor: "#fef6f7",
    position: "relative",
    margin: 50,
    borderColor: "red",
    borderWidth: 1
  },
  triangle: {
    width: 10,
    height: 10,
    position: "absolute",
    top: -10,
    left: 20,
    borderLeftWidth: 10,
    borderLeftColor: "transparent",
    borderRightWidth: 10,
    borderRightColor: "transparent",
    borderBottomWidth: 10,
    borderBottomColor: "red"
  },
  triangle2: {
    width: 10,
    height: 10,
    position: "absolute",
    top: -10,
    left: 21,
    borderLeftWidth: 9,
    borderLeftColor: "transparent",
    borderRightWidth: 9,
    borderRightColor: "transparent",
    borderBottomWidth: 9,
    borderBottomColor: "#fef6f7"
  }
});


import React，{Component}来自“React”；
从“react native”导入{View，StyleSheet}；
导出默认类仪表板扩展组件{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
方框：{
宽度：300，
身高：100，
背景颜色：“fef6f7”，
职位：“相对”，
差额：50，
边框颜色：“红色”，
边框宽度：1
},
三角形：{
宽度：10，
身高：10，
位置：“绝对”，
前-10名，
左:20,，
边线宽度：10，
borderLeftColor:“透明”，
边框宽度：10，
borderRightColor:“透明”，
边界宽度：10，
颜色：“红色”
},
三角形2：{
宽度：10，
身高：10，
位置：“绝对”，
前-10名，
左：21，
边线宽度：9，
borderLeftColor:“透明”，
边框宽度：9，
borderRightColor:“透明”，
边界宽度：9，
borderBottomColor:#fef6f7”
}
});
你错过了我的问题，我需要一个带向上箭头的边框作为背景视图。@ShoebSiddique“背景视图”是什么意思？
背景视图
带有边框。如何给
三角形视图
加边框？@ShoebSiddique你不能给三角形边框加颜色。在这种情况下，它必须是透明的。你错过了我的问题，我需要一个带向上箭头的边框作为背景视图。@ShoebSiddique“背景视图”是什么意思？带边框的
背景视图
。如何给
三角形视图
加边框？@ShoebSiddique你不能给三角形边框加颜色。在这种情况下，它必须是透明的。