带有向上箭头三角形的背景边框视图 |反应本机

Question

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

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

这是我当前的代码片段 -

<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>

Answer 1

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 来改变三角形的大小。此外，如果您想更改位置，请尝试使用 triangle.

的 top 和 left 属性

Answer 2

添加 2 个三角形，一个用于背景颜色，一个用于边框颜色

完整代码

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

Answer 3

以下是 css 中的上箭头、右箭头、下箭头和左箭头示例。要转换为 React Native css，只需将属性更改为驼峰大小写即可。如果您使用的是样式组件，则可以按原样使用它。 顶部箭头：

.topArrow {
     border-top-width: 0px;
     border-top-color: transparent;
     border-right-width: 80px;
     border-right-color: transparent;
     border-bottom-width: 160px;
     border-bottom-color: green;
     border-left-width: 80px;
     border-left-color: transparent;
     border-style: solid;
     height: 0px;
     width: 0px;
}

<div class="topArrow"></div>

右箭头：

.rightArrow {
     border-top-width: 80px;
     border-top-color: transparent;
     border-right-width: 0px;
     border-right-color: transparent;
     border-bottom-width: 80px;
     border-bottom-color: transparent;
     border-left-width: 160px;
     border-left-color: green;
     border-style: solid;
     height: 0px;
     width: 0px;
}

<div class="rightArrow"></div>

底部箭头：

.bottomArrow {
     border-top-width: 160px;
     border-top-color: green;
     border-right-width: 80px;
     border-right-color: transparent;
     border-bottom-width: 0;
     border-bottom-color: transparent;
     border-left-width: 80px;
     border-left-color: transparent;
     border-style: solid;
     height: 0px;
     width: 0px;
}

<div class="bottomArrow"></div>

左箭头：

.leftArrow {
     border-top-width: 80px;
     border-top-color: transparent;
     border-right-width: 160px;
     border-right-color: green;
     border-bottom-width: 80px;
     border-bottom-color: transparent;
     border-left-width: 0px;
     border-left-color: transparent;
     border-style: solid;
     height: 0px;
     width: 0px;
}

<div class="leftArrow"></div>

带有向上箭头三角形的背景边框视图 |反应本机

Background border view with up-arrow triangle | React Native

border

view

react-native