React Native中如何将单张图片拆分为3个独立图片

核心实现思路 #

先获取原图的尺寸信息，按照拆分规则（水平/垂直三等分，可自行调整）计算每个分片的裁剪区域，再通过React Native生态稳定工具完成裁剪、导出为独立文件。如果之前使用的第三方包存在兼容、精度不符合预期的问题，推荐使用以下两种实现方案：

方案1：高精度裁剪方案（推荐复杂场景使用） #

使用React Native生态官方维护的高性能图形库@shopify/react-native-skia实现，多端兼容稳定，裁剪精度可控，无额外适配成本：

• 第一步：安装依赖

npm install @shopify/react-native-skia
# iOS端需执行pod安装
cd ios && pod install && cd ..

• 第二步：获取原图尺寸，完成拆分导出

import { Image } from 'react-native';
import { Skia } from '@shopify/react-native-skia';
import RNFS from 'react-native-fs';

// 获取原图宽高
const getImageSize = (imageUri) => {
  return new Promise((resolve) => {
    Image.getSize(imageUri, (width, height) => resolve({ width, height }));
  });
};

// 拆分图片为3个独立文件
const splitImage = async (originalUri, splitType = 'vertical') => {
  const { width, height } = await getImageSize(originalUri);
  // 加载原图到Skia实例
  const imgBuffer = await (await fetch(originalUri)).arrayBuffer();
  const skiaImg = Skia.Image.MakeFromEncoded(imgBuffer);
  const resultUris = [];

  for (let i = 0; i < 3; i++) {
    let cropRect;
    if (splitType === 'vertical') {
      // 垂直三等分：宽度不变，高度为原图1/3，y轴偏移
      const partHeight = height / 3;
      cropRect = { x: 0, y: i * partHeight, width, height: partHeight };
    } else {
      // 水平三等分：高度不变，宽度为原图1/3，x轴偏移
      const partWidth = width / 3;
      cropRect = { x: i * partWidth, y: 0, width: partWidth, height };
    }
    // 裁剪生成分片
    const partImg = skiaImg.crop(cropRect);
    // 导出为png格式base64
    const partBase64 = partImg.encodeToBase64();
    // 如需持久化存储到本地文件，可搭配react-native-fs写入
    const partPath = `${RNFS.DocumentDirectoryPath}/split_part_${i}.png`;
    await RNFS.writeFile(partPath, partBase64, 'base64');
    resultUris.push(partPath);
  }
  return resultUris;
};

方案2：轻量实现方案（适合简单拆分场景） #

无需引入重型图形库，仅需react-native-view-shot即可实现，包体积增量极小：

• 第一步：安装依赖

npm install react-native-view-shot
cd ios && pod install && cd ..

• 第二步：渲染待裁剪视图，分别截图导出

import { useRef, View, Image, StyleSheet } from 'react-native';
import ViewShot from 'react-native-view-shot';

const SplitImage = ({ originalUri, imgWidth, imgHeight }) => {
  const part1Ref = useRef();
  const part2Ref = useRef();
  const part3Ref = useRef();
  const partHeight = imgHeight / 3;

  // 分别导出三个分片
  const exportAllParts = async () => {
    const part1Uri = await part1Ref.current.capture();
    const part2Uri = await part2Ref.current.capture();
    const part3Uri = await part3Ref.current.capture();
    return [part1Uri, part2Uri, part3Uri];
  };

  return (
    {/* 视图放在可视区域外，不影响正常页面渲染 */}
    <View style={styles.hiddenContainer}>
      {/* 第一个分片：展示原图顶部1/3 */}
      <ViewShot ref={part1Ref} options={{ format: 'png', quality: 1 }}>
        <Image
          source={{ uri: originalUri }}
          style={{ width: imgWidth, height: imgHeight, top: 0 }}
          resizeMode="cover"
        />
      </ViewShot>
      {/* 第二个分片：展示原图中间1/3 */}
      <ViewShot ref={part2Ref} options={{ format: 'png', quality: 1 }}>
        <Image
          source={{ uri: originalUri }}
          style={{ width: imgWidth, height: imgHeight, top: -partHeight }}
          resizeMode="cover"
        />
      </ViewShot>
      {/* 第三个分片：展示原图底部1/3 */}
      <ViewShot ref={part3Ref} options={{ format: 'png', quality: 1 }}>
        <Image
          source={{ uri: originalUri }}
          style={{ width: imgWidth, height: imgHeight, top: -partHeight * 2 }}
          resizeMode="cover"
        />
      </ViewShot>
    </View>
  );
};

const styles = StyleSheet.create({
  hiddenContainer: {
    position: 'absolute',
    left: -9999,
    top: -9999,
  },
});

注意事项 #

• 导出格式可根据需求调整为jpeg，同时设置压缩质量参数，降低分片文件体积
• 拆分规则可根据业务需求自定义，只需调整裁剪区域的坐标参数即可
• 如需将分片存储到系统相册，可搭配@react-native-camera-roll/camera-roll实现单独存储

内容的提问来源于stack exchange，提问作者Surbhi Davara