Reactjs 带缺口的角矩形

我整晚都在想办法在React Native中创建凹口/剪裁的拐角。这似乎是一件非常容易做到的事情，但显然不是。我猜SVG可能是正确的选择。希望能独立控制角落。我怎样才能做到这一点

---

您可以通过组合3个视图来制作这样的按钮：顶部凹口视图、带文本的矩形中央按钮和底部凹口视图，您的组件应如下所示：

import React from 'react';
import {
  StyleSheet, Text, TouchableOpacity, View
} from 'react-native';

const NotchedButton = ({ width, color }) => (
  <TouchableOpacity>
    <View style={{
      ...styles.notchStyle, borderBottomWidth: 10, borderBottomColor: color, width
    }}
    />
    <View style={{ ...styles.centerViewStyle, width, backgroundColor: color }}>
      <Text style={styles.textStyle}>Button</Text>
    </View>
    <View style={{
      ...styles.notchStyle, borderTopWidth: 10, borderTopColor: color, width
    }}
    />
  </TouchableOpacity>
);

NotchedButton.defaultProps = {
  width: '90%',
  color: 'red',
};

const styles = StyleSheet.create({
  notchStyle: {
    height: 10,
    borderLeftWidth: 10,
    borderLeftColor: 'transparent',
    borderRightWidth: 10,
    borderRightColor: 'transparent',
    borderStyle: 'solid'
  },
  centerViewStyle: {
    justifyContent: 'center', alignItems: 'center', height: 50
  },
  textStyle: { fontSize: 24, color: 'white' }
});

export default NotchedButton;

从“React”导入React；
进口{
样式表，文本，可触摸不透明度，视图
}从“反应本机”；
常量缺口按钮=（{width，color}）=>(
按钮
);
notckedbutton.defaultProps={
宽度：“90%”，
颜色：“红色”，
};
const styles=StyleSheet.create({
notchStyle：{
身高：10，
边线宽度：10，
borderLeftColor:'透明'，
边框宽度：10，
borderRightColor:“透明”，
边框样式：“实心”
},
centerViewStyle：{
justifyContent:'居中'，alignItems:'居中'，高度：50
},
文本样式：{fontSize:24，颜色：'white'}
});
导出默认槽口按钮；

此组件将如下所示：

import React from 'react';
import {
  StyleSheet, Text, TouchableOpacity, View
} from 'react-native';

const NotchedButton = ({ width, color }) => (
  <TouchableOpacity>
    <View style={{
      ...styles.notchStyle, borderBottomWidth: 10, borderBottomColor: color, width
    }}
    />
    <View style={{ ...styles.centerViewStyle, width, backgroundColor: color }}>
      <Text style={styles.textStyle}>Button</Text>
    </View>
    <View style={{
      ...styles.notchStyle, borderTopWidth: 10, borderTopColor: color, width
    }}
    />
  </TouchableOpacity>
);

NotchedButton.defaultProps = {
  width: '90%',
  color: 'red',
};

const styles = StyleSheet.create({
  notchStyle: {
    height: 10,
    borderLeftWidth: 10,
    borderLeftColor: 'transparent',
    borderRightWidth: 10,
    borderRightColor: 'transparent',
    borderStyle: 'solid'
  },
  centerViewStyle: {
    justifyContent: 'center', alignItems: 'center', height: 50
  },
  textStyle: { fontSize: 24, color: 'white' }
});

export default NotchedButton;

您可以从该组件中提取属性作为道具，如按钮文本、宽度、高度、颜色

---

对于复杂的react原生形状，我推荐这个非常好的，每次我需要复杂的ui时，我都会遵循本教程，找到我想要的。

检查下面的示例，它使您能够独立控制角点。但要做到这一点，您必须在按钮内包装四种不同的

View

import * as React from "react";
import { Text, View, StyleSheet, TouchableOpacity } from "react-native";

export default function App() {
  return (
    <TouchableOpacity
      onPress={() => console.log("Button Clicked")}
      style={styles.buttonStyle}
    >
      <View style={styles.cutOffTopLeft} />
      <View style={styles.cutOffTopRight} />
      <View style={styles.cutOffBottomLeft} />
      <View style={styles.cutOffBottomRight} />
      <Text style={styles.textStyle}>START 30-DAY FREE TRIAL</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  buttonStyle: {
    backgroundColor: "red",
    alignItems: "center",
    justifyContent: "center",
    margin: 20,
  },
  textStyle: {
    color: "#FFFFFF",
    marginVertical: 13,
  },
  cutOffTopLeft: {
    position: "absolute",
    left: 0,
    top: 0,
    borderRightWidth: 10,
    borderTopWidth: 10,
    borderTopColor: "white",
    borderRightColor: "transparent",
  },
  cutOffTopRight: {
    position: "absolute",
    right: 0,
    top: 0,
    borderLeftWidth: 10,
    borderTopWidth: 10,
    borderTopColor: "white",
    borderLeftColor: "transparent",
  },
  cutOffBottomLeft: {
    position: "absolute",
    left: 0,
    bottom: 0,
    borderRightWidth: 10,
    borderBottomWidth: 10,
    borderBottomColor: "white",
    borderRightColor: "transparent",
  },
  cutOffBottomRight: {
    position: "absolute",
    right: 0,
    bottom: 0,
    borderLeftWidth: 10,
    borderBottomWidth: 10,
    borderBottomColor: "white",
    borderLeftColor: "transparent",
  },
});

import*as React from“React”；
从“react native”导入{文本、视图、样式表、TouchableOpacity}；
导出默认函数App（）{
返回(
console.log（“单击按钮”）}
style={style.buttonStyle}
>
开始30天免费试用
);
}
const styles=StyleSheet.create({
按钮样式：{
背景颜色：“红色”，
对齐项目：“中心”，
辩护内容：“中心”，
差额：20，
},
文本样式：{
颜色：“FFFFFF”，
Margin:13，
},
截断左上角：{
位置：“绝对”，
左:0,，
排名：0，
边框宽度：10，
边框宽度：10，
borderTopColor:“白色”，
borderRightColor:“透明”，
},
截流权：{
位置：“绝对”，
右:0,，
排名：0，
边线宽度：10，
边框宽度：10，
borderTopColor:“白色”，
borderLeftColor:“透明”，
},
截止左下角：{
位置：“绝对”，
左:0,，
底部：0，
边框宽度：10，
边界宽度：10，
颜色：“白色”，
borderRightColor:“透明”，
},
截止日期（右）：{
位置：“绝对”，
右:0,，
底部：0，
边线宽度：10，
边界宽度：10，
颜色：“白色”，
borderLeftColor:“透明”，
},
});

这可能不是最佳解决方案

---

希望这对你有帮助。不要怀疑

这很接近，但角落不是透明的unfortunately@BradHerman因为它是一个单独的视图，所以不能提供透明的颜色。但是，如果您想根据父视图更改角点的颜色，请将角点颜色作为道具传递。这很有效！但问题是：由于这是采取了几个形状和覆盖他们，有没有办法使按钮透明，只有一个边框的轮廓，对吗？如果我想拥有这种行为，RN中唯一的选择是学习如何创建svg路径吗？我不能说是否可以使用react native为这样的组件创建边框，我尝试了一点，但没有找到任何解决方案。。我认为你应该问另一个问题，这样更有经验的人可以帮你解决这个问题。