React Native开发鸿蒙Next---图片浏览与保存的问题交流

转载

悬空八只脚 2025-03-25 11:09:15 博主文章分类：React-Native开发HarmonyOSNext应用

文章标签 图片浏览保存图片 Harmony 文章分类 软件研发 yyds干货盘点

React Native开发鸿蒙Next---图片浏览与保存的问题交流

之前介绍过利用鸿蒙三方RN组件@react-native-camera-roll/camera-roll保存图片到相册。

React Native开发鸿蒙Next---react-native-cameraroll在ArkTS下的接入报错
悬空八只脚，公众号：悬空八只脚React Native开发鸿蒙Next---react-native-cameraroll在ArkTS下的接入报错

最近在使用过程中新遇到了一个小问题。应用的图片都是保存在阿里云OSS上的，在对图片做展示的时候，自然而然想到利用oss对图片做一些诸如缩放/圆底等处理。存储的时候，没细想就把oss图片路径带上处理参数传了进去。

const downloadPath = filePath + '?x-oss-process=image/resize,w_1000';

这导致了存储失败，可以看到如下报错

WARN  Possible Unhandled Promise Rejection (id: 1):
Object {
  "message": "bad file path   GetFd File already exists",
}

直接用oss地址filePath去保存就没有问题。

import {CameraRoll} from '@react-native-camera-roll/camera-roll';
CameraRoll.saveAsset(filePath).then(res => {  
console.log('res-----', res);
......

downloadPath直接在浏览器里也是可以正常下载的。造成这一问题的原因尚不明确，目前采取oss原始路径来保存图片的方式。

此外，在使用@react-native-oh-tpl/react-native-image-zoom-viewer进行图片浏览时，存在无法控制图片缩放样式问题(resizeMode/scaleType都不支持),对于一些尺寸较小的图片会居中显示导致较多留白，虽然可以通过诸如oss直接设置图片参数方式来处理，但不是很方便。react-native-image-zoom-viewer本身依赖了camera-roll，内部也是通过camera-roll来实现图片的保存。在用了oss参数设置图片尺寸后也有无法下载的问题。目前应用中还是只将react-native-image-zoom-viewer用于图片浏览，@react-native-camera-roll/camera-roll单独处理下载保存。

import ImageViewer from '@react-native-oh-tpl/react-native-image-zoom-viewer';
  ......    
      <View style={styles.viewBg}>
        {fileList && fileList.length > 0 && (
          <ImageViewer
            scaleType={'cover'}
            resizeMode={'cover'}
            imageUrls={fileList} // 照片路径
            enableImageZoom={true} // 是否开启手势缩放
            index={currentIndex} // 初始显示第几张
            onChange={index => setIndex(index)} // 图片切换时触发
            onClick={() => {
              // 图片单击事件
              
            }}
            saveToLocalByLongPress={false}
          />
        )}
      </View>

React Native开发鸿蒙Next---图片浏览与保存的问题交流_保存图片