如何使用卡片顶部的反向边框半径？ （本机反应）

Question

我正在尝试在 React Native 中创建一个顶部边缘有凹口的红色盒子（如图所示）。该凹口应具有倒圆角和倒边界半径。然后我想在凹口中写一个字，凹口的大小取决于字的长度。稍后盒子上也会有文字。图片中所有黑色的部分都应该是透明的，以便稍后调整背景。

我已经尝试过无数次了。但要么是凹口的背景不透明，要么是边角不像图片中那么圆润。我遇到的另一个问题是，并非所有内容都在矩形容器中，而是有些元素在外部。

我已经在 html 和 css 中尝试过了，它也在那里工作。但我无法让它在本机反应中工作。

Answer 1

您可以将凹口组件分成 3 部分：文本部分、左侧曲线和右侧曲线。设置文本片段的

borderBottomLeftRadius

和

borderBottomRightRadius

样式可以让你完成一半以上；但外缘很棘手。

import { View, StyleSheet, Text } from 'react-native';
import useLayout from '../hooks/useLayout';
export default function Container({
  contentContainerStyle,
  backgroundColor,
  headerBackgroundColor,
  borderRadius,
  headerTextStyle,
  title,
  children,
}) {
  const [headerLayout, onHeaderLayout] = useLayout();

  return (
    <View style={contentContainerStyle}>
      <View>{children}</View>
      <View style={styles.header}>
        {/* left curve */}
        <View
          style={{
            width: 20,
            height: '100%',
            backgroundColor: headerBackgroundColor,
          }}>
          <View
            style={{
              borderTopRightRadius: borderRadius,
              borderBottomRadius: borderRadius,
              borderTopWidth: headerLayout.height,
              borderTopColor: backgroundColor,
            }}
          />
        </View>
        {/* header */}
        <View
          style={{
            backgroundColor: headerBackgroundColor,
            padding: 5,
            paddingHorizontal: 20,
            borderBottomLeftRadius: borderRadius,
            borderBottomRightRadius: borderRadius,
          }}
          onLayout={onHeaderLayout}>
          <Text style={headerTextStyle}>{title}</Text>
        </View>
        {/* right curve */}
        <View
          style={{
            width: 20,
            height: '100%',
            backgroundColor: headerBackgroundColor,
          }}>
          <View
            style={{
              borderTopLeftRadius: borderRadius,
              borderBottomRadius: borderRadius,
              borderTopWidth: headerLayout.height,
              borderTopColor: backgroundColor,
            }}
          />
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  header: {
    position: 'absolute',
    flexDirection: 'row',
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    top: 0,
    zIndex: 3,
  },
});

用途：

import {
  Text,
  SafeAreaView,
  StyleSheet,
  View,
  ImageBackground,
} from 'react-native';
import Container from './components/Container';

const borderRadius = 15;
const backgroundColor = 'red';
const headerBackgroundColor = 'black';
export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Container
        borderRadius={borderRadius}
        title="Hello World"
        headerBackgroundColor={headerBackgroundColor}
        backgroundColor={backgroundColor}
        contentContainerStyle={styles.innerContent}
        headerTextStyle={styles.headerText}>
        <>
          <Text style={styles.title}>Title</Text>
          <Text>{text}</Text>
        </>
      </Container>
    </SafeAreaView>
  );
}

const text =
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: headerBackgroundColor,
    padding: 8,
  },
  title: {
    marginVertical: 24,
    fontSize: 18,
    fontWeight: 'bold',
    // textAlign: 'center',
  },
  innerContent: {
    backgroundColor,
    borderRadius,
    padding: 5,
    margin: 5,
    paddingVertical: 10,
  },
  headerText: {
    fontSize: 16,
    fontWeight: 'bold',
    color: 'white',
  },
});

演示