React Native 如何实现两张圆形国旗图标的左右半幅拼接

核心实现逻辑 #

不需要引入额外的图片处理第三方库，纯RN基础组件即可完成效果，本质是靠层级叠放+容器溢出裁剪完成素材截取，最终展示的整体图形为正圆形：

• 外层设置固定尺寸的正圆容器，开启溢出隐藏，作为整个拼接图形的最终边界
• 准备两个独立的圆形国旗素材，分别放在左右两个宽度为外层容器一半的裁剪容器中，通过位置偏移让裁剪容器刚好只截取对应国旗的左/右半幅
• 两个半幅裁剪区拼接后和外层容器尺寸完全对齐，自然形成完整的拼接展示图形

可直接复用的组件实现 #

import { View, Image } from 'react-native';

const CombinedDualFlag = ({ leftFlag, rightFlag, displaySize = 100 }) => {
  const halfSize = displaySize / 2;
  return (
    // 外层正圆外框
    <View style={{
      width: displaySize,
      height: displaySize,
      borderRadius: displaySize / 2,
      overflow: 'hidden',
      flexDirection: 'row'
    }}>
      {/* 左半裁剪区：截取第一个国旗的左半幅 */}
      <View style={{
        width: halfSize,
        height: displaySize,
        overflow: 'hidden'
      }}>
        <Image
          source={leftFlag}
          style={{
            width: displaySize,
            height: displaySize,
            borderRadius: displaySize / 2
          }}
          resizeMode="cover"
        />
      </View>

      {/* 右半裁剪区：截取第二个国旗的右半幅 */}
      <View style={{
        width: halfSize,
        height: displaySize,
        overflow: 'hidden'
      }}>
        <Image
          source={rightFlag}
          style={{
            width: displaySize,
            height: displaySize,
            borderRadius: displaySize / 2,
            // 向左偏移半个图片宽度，让裁剪区刚好露出图片的右半段
            marginLeft: -halfSize
          }}
          resizeMode="cover"
        />
      </View>
    </View>
  );
};

实操注意事项 #

• 所有承担裁剪作用的容器，必须显式设置overflow: 'hidden'，否则超出容器边界的图片内容会突破裁剪限制，造成拼接穿帮
• 不同比例的国旗素材加载时搭配resizeMode="cover"，可以避免图片被拉伸变形
• 如果需要给拼接中线做柔化过渡，只需要在两个半区的衔接位置叠一层窄宽度的半透明渐变View即可，不需要改动原有拼接结构
• 该实现没有依赖平台专属API，iOS、Android双端均可兼容，低版本RN环境也能正常运行

内容的提问来源于stack exchange，提问作者Víctor Samsonov