如何在React Native中实现带弧形三角箭头的视图？

我想要实现如下样式的视图：

但我目前无法实现该效果，当前实现的效果如下：

我目前编写的代码如下：

const Coachmark = () => {
  return (
    <View style={styles.container}>
      <View style={[styles.coachmark, styles.coachmarkTop]}>
        <Text style={styles.text}>Got a code,Enter it here now</Text>
      </View>

      <View
        style={
          styles.topTriangleMarker
        }></View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 10,
  },
  coachmark: {
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 10,
    elevation: 5,
    shadowColor: '#232323',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.8,
    shadowRadius: 8,
  },
  text: {
    color: 'black',
    fontSize: 16,
  },
  topTriangleMarker: {
    position: 'absolute',
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderLeftWidth: 30,
    borderRightWidth: 30,
    borderBottomWidth: 30,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: 'white',
    top: -20,
    right: 60,
    transform: [{ rotate: '360deg' }],
    elevation: 5,
  },

});

请问有人能帮我实现这个带阴影且箭头为弧形的视图吗？

要实现带弧形箭头和完整阴影的气泡视图，可通过以下方式修改代码：

核心思路 #

1. 放弃边框实现箭头的方式，改用borderRadius+绝对定位的矩形视图模拟弧形箭头，保证箭头与气泡主体的圆角衔接自然。
2. 将气泡主体与箭头放入同一父容器，统一设置阴影属性，避免两者阴影脱节。

修改后的代码 #

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

const Coachmark = () => {
  return (
    <View style={styles.container}>
      {/* 统一承载阴影的父容器 */}
      <View style={styles.bubbleWrapper}>
        {/* 气泡主体 */}
        <View style={styles.coachmark}>
          <Text style={styles.text}>Got a code,Enter it here now</Text>
        </View>
        {/* 弧形箭头 */}
        <View style={styles.arrow}></View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 10,
    alignSelf: 'flex-start', // 避免阴影被父容器截断
  },
  bubbleWrapper: {
    position: 'relative',
    // 统一设置阴影
    shadowColor: '#232323',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.8,
    shadowRadius: 8,
    elevation: 5,
  },
  coachmark: {
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 10,
  },
  text: {
    color: 'black',
    fontSize: 16,
  },
  arrow: {
    position: 'absolute',
    width: 40,
    height: 20,
    backgroundColor: 'white',
    top: -10,
    right: 50,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20, // 实现弧形顶部
    transform: [{ rotate: '180deg' }], // 旋转让弧形朝向气泡
  },
});

export default Coachmark;

代码说明 #

• bubbleWrapper作为父容器统一管理阴影，确保气泡和箭头的阴影效果一致且不脱节。
• 箭头通过矩形视图配合borderRadius实现弧形，旋转后调整位置与气泡主体无缝衔接。
• 设置container的alignSelf为flex-start，避免阴影被父容器边界截断。

若需要更贴合目标样式的弧形效果，可调整箭头的width、height、borderRadius以及位置参数。

内容的提问来源于stack exchange，提问作者Vipin kumar