如何使用 React-Native 进行这种转换?

如果你正在使用 React-Native 并且需要进行这种类型的转换，那么可以按照以下步骤操作。

步骤 1: 安装依赖

首先，你需要安装三个依赖。

依赖1: react-native-transformable-image

npm install --save react-native-transformable-image

这个依赖是为了让用户可以放大或缩小图片并旋转。

依赖2: react-native-image-picker

npm install --save react-native-image-picker

这个依赖用于打开本地相册选择一张图片。

依赖3: react-native-fs

npm install --save react-native-fs

这个依赖是为了将图片保存到本地设备。

步骤 2: 创建组件

然后，你需要创建自定义组件来处理图像相关的功能。

import React, { Component } from 'react';
import { View, Text, Image, TouchableOpacity, PermissionsAndroid } from 'react-native';
import ImagePicker from 'react-native-image-picker';
import TransformableImage from 'react-native-transformable-image';
import RNFS from 'react-native-fs';

export default class ImagePickerExample extends Component {
    state = {
        imagePath: null,
        imageData: null,
    }

    // 打开相册找到并设置图片路径
    chooseImage = async () => {
        await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE);
        ImagePicker.launchImageLibrary({}, response => {
            if (response.uri) {
                this.setState({ imagePath: response.uri });
                RNFS.readFile(response.uri, 'base64').then(data => {
                    this.setState({ imageData: data });
                });
            }
        });
    }

    // 自定义标题栏
    renderHeader = () => {
        return (
            <View>
                <Text style={{ color: 'white', fontSize: 24, alignSelf: 'center' }}>Transformable Image</Text>
            </View>
        );
    }

    // 保存图片到本地
    saveImage = () => {
        const { imageData } = this.state;
        RNFS.writeFile(RNFS.DocumentDirectoryPath + '/temp_image.jpg', imageData, 'base64')
            .then(result => {
                alert('图片已保存到设备本地');
            }).catch(error => {
                alert('图片保存失败');
            });
    }

    render() {
        const { imagePath } = this.state;
        return (
            <View style={{ flex: 1 }}>
                {this.renderHeader()}
                {imagePath ?
                    <TransformableImage
                        style={{ flex: 1 }}
                        source={{ uri: imagePath }}
                    />
                    :
                    <TouchableOpacity onPress={this.chooseImage}>
                        <Text style={{ color: 'blue' }}>选择图片</Text>
                    </TouchableOpacity>
                }
                {imagePath ?
                    <TouchableOpacity onPress={this.saveImage}>
                        <Text style={{ color: 'blue' }}>保存图片到本地</Text>
                    </TouchableOpacity>
                    : null
                }
            </View>
        );
    }
}

步骤 3: 测试

最后，你可以尝试运行这个组件并尝试选择一张图片。你应该能够看到该图像可以被缩放、旋转和平移，并且你应该能够将其保存到本地设备。

希望这篇文章可以帮助你了解如何在 React-Native 中进行这种类型的转换。