React Native中如何给非矩形组合形状添加统一外部阴影？

你不需要给每个子View单独套Surface，而是把两个拼形状的View放进同一个父Surface容器里，只给父容器设置阴影属性，子View只负责拼接出目标形状、不加任何阴影相关配置。这样就能得到统一的外部阴影，而且圆形部分不会有阴影覆盖在矩形上方。

具体实现代码示例：

import { View, StyleSheet } from 'react-native';
import { Surface } from 'react-native-paper';

const CustomShapedComponent = () => {
  return (
    <Surface
      style={styles.parentContainer}
      mode="elevated"
      elevation={5}
    >
      {/* 矩形部分 */}
      <View style={styles.rectangle} />
      {/* 圆形部分，覆盖在矩形右端实现无缝拼接 */}
      <View style={styles.circle} />
    </Surface>
  );
};

const styles = StyleSheet.create({
  parentContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    width: 170,
    height: 60,
    // 父容器右端圆角和圆形半径一致，保证阴影贴合整体形状
    borderTopRightRadius: 30,
    borderBottomRightRadius: 30,
    backgroundColor: '#ffffff',
  },
  rectangle: {
    width: 140,
    height: '100%',
    backgroundColor: '#ffffff',
  },
  circle: {
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: '#ffffff',
    position: 'absolute',
    // 让圆形左半部分覆盖在矩形上，消除拼接间隙
    left: 110,
  },
});

export default CustomShapedComponent;

问题根源说明 #

你之前给每个子View都单独套了Surface，每个Surface会生成独立的阴影层，所以圆形的阴影会叠在矩形上方。现在让父容器单独承担阴影渲染，子View只负责拼出形状，就彻底解决了这个问题。

你可以根据设计图调整父容器的尺寸、圆角，以及子View的位置参数，来匹配精准的形状需求。

内容的提问来源于stack exchange，提问作者Royi Cohen