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

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

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