react-native-view-shot长截图样式失效：圆角属性不生效问题问询

使用react-native-view-shot的captureRef截取长截图（开启snapshotContentContainer: true）时，目标组件设置的非0值border-radius无法在截图中正常显示，以下是几种可行的解决思路：

• 给目标组件套外层容器并设置overflow:hidden
  将border-radius和overflow: 'hidden'移到目标组件的外层容器上，确保截图时内容被容器圆角截断。示例代码：

  // 修改deviceDataScreenRef挂载的组件结构
  <View style={{ borderRadius: 16, overflow: 'hidden' }} ref={deviceDataScreenRef}>
    {/* 原内容组件 */}
    <YourOriginalContent />
  </View>
  

• 关闭snapshotContentContainer参数
  如果业务场景允许不聚焦内容容器（比如不需要截取超出屏幕的滚动内容），可以将snapshotContentContainer设为false，这样截图会包含外层视图的样式：

  const uri = await captureRef(deviceDataScreenRef, {
    fileName: `data-screenshot-${DateTime.formatDateTime(new Date())}`,
    format: "jpg",
    quality: 0.8,
    snapshotContentContainer: false
  });
  

• 改用captureScreen截取全屏
  若要截取的区域是全屏内容，可以直接使用captureScreen替代captureRef，避免组件引用的样式丢失问题（注意长截图需要先确保内容滚动到正确位置）：

  const handleShareScreenshot = async () => {
    try {
      const uri = await captureScreen({
        fileName: `data-screenshot-${DateTime.formatDateTime(new Date())}`,
        format: "jpg",
        quality: 0.8
      });
      if (uri) await Sharing.shareAsync(uri);
      onClose();
    } catch (err) {
      console.log(err);
    }
  };
  

• 截图后手动添加圆角
  如果以上方法都不适用，可以在截图完成后，通过图片处理库给图片添加圆角。以@react-native-community/image-editor为例：

  import ImageEditor from '@react-native-community/image-editor';
  
  const handleShareScreenshot = async () => {
    try {
      if (!deviceDataScreenRef) return;
      
      let uri = await captureRef(deviceDataScreenRef, {
        fileName: `data-screenshot-${DateTime.formatDateTime(new Date())}`,
        format: "jpg",
        quality: 0.8,
        snapshotContentContainer: true 
      });
  
      // 裁剪圆角，需替换为实际截图尺寸
      const roundedUri = await ImageEditor.cropImage(uri, {
        offset: { x: 0, y: 0 },
        size: { width: 375, height: 812 },
        displaySize: { width: 375, height: 812 },
        resizeMode: 'contain',
        borderRadius: 16
      });
  
      if (roundedUri) await Sharing.shareAsync(roundedUri);
      onClose();
    } catch (err) {
      console.log(err);
    }
  };
  

内容的提问来源于stack exchange，提问作者Malini Udayakumar