[RN]使用react-native-image-zoom-viewer缩放图片显示器长按保存图片到相册功能失效

20 篇文章 1 订阅

原因:
插件源码使用的CameraRoll已从RN移除,需要另外添加@react-native-community/cameraroll
在这里插入图片描述
使用ImageViewer提供的onSave回调实现保存:

import path from 'react-native-path';
import RNFetchBlob from 'rn-fetch-blob';
import CameraRoll from "@react-native-community/cameraroll";
import ImageViewer from 'react-native-image-zoom-viewer';

const onSave = async (url) => {
        let localUri = url;
        if (Platform.OS === 'android') {
            if (await hasAndroidPermission()) {
                let fileName = path.basename(url);
                // 文件夾路徑
                let dirPath = RNFetchBlob.fs.dirs.CacheDir + '/imgs';
                // 完整路徑
                let imagePath = path.fullpath(dirPath, fileName);
                RNFetchBlob.config({ path: imagePath })
                    .fetch('GET', url, {})
                    .then((res) => {
                        localUri = res.path().startsWith('file://') ? res.path() : `file://${res.path()}`;
                        saveImage(localUri);
                    })
                    .catch((err) => {
                        console.warn('download err', err);
                    });
            }
        } else {
            saveImage(localUri);
        }
    };

const saveImage = (url) => {
        CameraRoll.save(url).catch((err) => {
            console.warn('save err', err);
        });
}
<ImageViewer
		......
		onSave={onSave}

注意:
@react-native-community/cameraroll提供的save方法需要的url必须是本地链接,可以用rn-fetch-blob先将图片下载

CameraRoll.save(tag, { type, album })
On Android, the tag must be a local image or video URI, such as “file:///sdcard/img.png”.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 `react-native-svg` 和 `react-native-svg-transformer` 加载本地 SVG 图像,你可以按照以下步骤进行操作: 1. 首先,确保你已经在项目中安装了 `react-native-svg` 和 `react-native-svg-transformer` 依赖。你可以通过运行以下命令来安装它们: ``` npm install react-native-svg react-native-svg-transformer ``` 2. 在项目的根目录下创建一个名为 `metro.config.js` 的文件(如果已存在,请跳过此步骤)。 3. 在 `metro.config.js` 文件中添加以下内容: ```javascript module.exports = { transformer: { assetPlugins: ['react-native-svg-transformer'], }, }; ``` 4. 接下来,在你的组件中,使用 `react-native-svg` 中的 `<SvgUri>` 组件来加载本地 SVG 图像。首先,确保你的 SVG 图像位于项目的 `assets` 文件夹中。 ```javascript import React from 'react'; import { View } from 'react-native'; import SvgUri from 'react-native-svg-uri'; const MyComponent = () => { return ( <View> <SvgUri width={200} height={200} source={require('./assets/myImage.svg')} /> </View> ); }; export default MyComponent; ``` 在上面的示例中,我们使用 `require` 方法加载位于 `assets` 文件夹中的 `myImage.svg` 图像,并将其作为 `source` 属性传递给 `<SvgUri>` 组件。你可以根据自己的需要调整宽度和高度。 5. 确保你在重新启动 Metro Bundler 之前完成了以上步骤。你可以通过运行以下命令重新启动 Metro Bundler: ``` npx react-native start --reset-cache ``` 这样,你就可以使用 `react-native-svg` 和 `react-native-svg-transformer` 成功加载和显示本地 SVG 图像了。 希望对你有所帮助!如有任何疑问,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值