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

2025-03-25
江苏
本文字数：1227 字
阅读完需：约 4 分钟

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>