[移动开发]小程序和app实现项目本地图片保存到相册，采用taro

直接贴代码
小程序端实现代码：

import Taro, { Component, Config } from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components';
import { NavigationBar } from '@/components';
import './index.scss';

import officialAccountPng from './official-account.png';
import bgImage from './bg.png';

/**
 * 引导关注海信集团成为会员
 */
export default class GroupGoldExchangeTip extends Component {
    static config: Config = {
        navigationBarTitleText: '关注成为集团会员',
        backgroundColor: '#ffffff',
        navigationStyle: 'custom'
    };

    downCard = (e: Event) => {
        e.preventDefault();
        e.stopPropagation();

        // 获取用户是否开启用户授权相册
        Taro.getSetting({
            success(res) {
                // 如果没有则获取授权
                if (!res.authSetting['scope.writePhotosAlbum']) {
                    Taro.authorize({
                        scope: 'scope.writePhotosAlbum',
                        success() {
                            Taro.saveImageToPhotosAlbum({
                                filePath: officialAccountPng,
                                success() {
                                    Taro.showToast({
                                        title: '保存成功'
                                    });
                                },
                                fail() {
                                    Taro.showToast({
                                        title: '保存失败',
                                        icon: 'none'
                                    });
                                }
                            });
                        },
                        fail() {}
                    });
                } else {
                    // 有则直接保存
                    Taro.saveImageToPhotosAlbum({
                        filePath: officialAccountPng,
                        success() {
                            Taro.showToast({
                                title: '保存成功'
                            });
                        },
                        fail() {
                            Taro.showToast({
                                title: '保存失败',
                                icon: 'none'
                            });
                        }
                    });
                }
            },
            fail() {
                Taro.showToast({
                    title: '保存失败',
                    icon: 'none'
                });
            }
        });
    };

    render() {
        return (
            <View className='group-gold-exchange-tip'>
                <NavigationBar
                    navigationBarTitle='关注成为集团会员'
                    backIcon
                    backIconType='black'
                />
                <Image
                    className='group-gold-exchange-tip__bg'
                    mode='widthFix'
                    src={bgImage}
                />
                <View className='group-gold-exchange-tip__code-wrap'>
                    <View className='group-gold-exchange-tip__code-box'>
                        <Image
                            showMenuByLongpress
                            className='group-gold-exchange-tip__code-box-img'
                            src={officialAccountPng}
                        />
                    </View>
                    <View
                        className='group-gold-exchange-tip__download'
                        onClick={this.downCard.bind(this)}
                    >
                        <View className='group-gold-exchange-tip__download-btn'>
                            <Text className='group-gold-exchange-tip__download-text'>
                                保存图片
                            </Text>
                        </View>
                    </View>
                </View>
            </View>
        );
    }
}

app端
package.json中添加插件

"react-native-view-shot": "^3.1.2",

实现代码：（app采用ViewShot截图）

import Taro, { Component, Config } from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components';
import { NavigationBar } from '@/components';
import RNFile from '@/services/save-file';
import ViewShot from 'react-native-view-shot';
import './index.scss';

import officialAccountPng from './official-account.png';
import bgImage from './bg.png';

/**
 * 引导关注海信集团成为会员
 */
export default class GroupGoldExchangeTip extends Component {
    static config: Config = {
        navigationBarTitleText: '关注成为集团会员',
        backgroundColor: '#ffffff',
        navigationStyle: 'custom'
    };

    downCard = () => {
        // eslint-disable-next-line react/no-string-refs
        this.refs.viewShot
            .capture()
            .then((uri) => {
                RNFile.downloadImage(uri, '.png', true);
            })
            .catch(() => {
                Taro.showToast({
                    title: '保存失败',
                    icon: 'none'
                });
            });
    };

    render() {
        return (
            <View className='group-gold-exchange-tip'>
                <NavigationBar
                    navigationBarTitle='关注成为集团会员'
                    backIcon
                    backIconType='black'
                />
                <Image
                    className='group-gold-exchange-tip__bg'
                    mode='widthFix'
                    src={bgImage}
                />
                <View className='group-gold-exchange-tip__code-wrap'>
                    <ViewShot
                        // eslint-disable-next-line react/no-string-refs
                        ref='viewShot'
                        options={{ format: 'png' }}
                    >
                        <View className='group-gold-exchange-tip__code-box'>
                            <Image
                                showMenuByLongpress
                                className='group-gold-exchange-tip__code-box-img'
                                src={officialAccountPng}
                            />
                        </View>
                    </ViewShot>
                    <View
                        className='group-gold-exchange-tip__download'
                        onClick={this.downCard.bind(this)}
                    >
                        <View className='group-gold-exchange-tip__download-btn'>
                            <Text className='group-gold-exchange-tip__download-text'>
                                保存图片
                            </Text>
                        </View>
                    </View>
                </View>
            </View>
        );
    }
}

RNFile.downloadImage的具体实现方案

import { Platform } from 'react-native';
import CameraRoll from '@react-native-community/cameraroll';
import Taro from '@tarojs/taro';
import RNFS from 'react-native-fs';

const imgTypeArr = ['.png', '.jpg', '.jpeg', '.gif', '.bmp'];

const RNFile = {
    /**
     * @param fromUrl 文件地址
     * @param fileType 文件类型
     * @param directSaveAlbum 是否是file协议的文件 直接保存
     */
    async downloadImage(fromUrl, fileType = '', directSaveAlbum = false) {
        if (!fromUrl) return;
        if (!fileType) fileType = '.png';

        Taro.showLoading({ title: '' });

        if (Platform.OS === 'android') {
            for (let index = 0; index < imgTypeArr.length; index++) {
                const item = imgTypeArr[index];
                if (fromUrl.indexOf(item) >= 0) {
                    fileType = item;
                    break;
                }
            }

            if (directSaveAlbum) {
                // 如果图片资源是 file://xxxx 的 直接使用存储
                // https://github.com/itinance/react-native-fs/issues/865
                const promise = CameraRoll.saveToCameraRoll(fromUrl);
                promise
                    .then(() => {
                        Taro.showToast({
                            title: '保存成功！'
                        });
                    })
                    .catch((error) => {
                        Taro.showToast({
                            title: '保存失败！\n' + error
                        });
                    });
            } else {
                const storeLocation = `${RNFS.DocumentDirectoryPath}`;
                const pathName = `${new Date().getTime()}${Math.random() *
                    1000}${fileType}`;
                const downloadPath = `${storeLocation}/${pathName}`;
                const ret = RNFS.downloadFile({
                    fromUrl,
                    toFile: downloadPath
                });
                ret.promise.then((res) => {
                    if (res && res.statusCode === 200) {
                        const promise = CameraRoll.saveToCameraRoll(
                            'file://' + downloadPath
                        );
                        promise
                            .then(() => {
                                Taro.showToast({
                                    title: '保存成功！'
                                });
                            })
                            .catch((error) => {
                                Taro.showToast({
                                    title: '保存失败！\n' + error
                                });
                            });
                    }
                });
            }
        } else {
            const promise = CameraRoll.saveToCameraRoll(fromUrl);
            promise
                .then(() => {
                    Taro.showToast({
                        title: '保存成功！'
                    });
                })
                .catch(function(error) {
                    Taro.showToast({
                        title: '保存失败！\n' + error
                    });
                });
        }
    }
};

export default RNFile;