如何使用expo文件系统保存图库中的二维码

我正在使用 expo 开发一个 React Native 项目。它包括创建一个二维码（我已经完成了），将二维码转换为图像，然后将其保存到图库。

我想将 QR 码转换为图像，然后将其保存到我的图库中或共享。在下面给出的代码中，在编译时会出现错误。

错误类型错误：未定义不是对象（评估“self.setState”）

我在这里粘贴我的 QrGenerator.js 文件： `

import React, { useState } from 'react';
import {
    Box, Heading, Center, Button,
    NativeBaseProvider, Text, Input, FormControl, Stack
} from "native-base";
import QRCode from 'react-native-qrcode-svg';

import * as FileSystem from 'expo-file-system';
import * as Sharing from 'expo-sharing';

export default function QrGenerator({ navigation }) {

    const [input, setInput] = useState("name");
    const [productQRref, setProductQRref] = useState('');


    const handleChange = (text) => {
        setInput(text);
    }

    const image_source = 'https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80'; // I want to convert this image into base64

    const share = () => {
        var self = this;
        self.setState({ loading: true })
        FileSystem.downloadAsync(
            image_source,
            FileSystem.documentDirectory + '.png'
        )
            .then(({ uri }) => {
                console.log(self.state.base64Code);
                FileSystem.writeAsStringAsync(
                    uri,
                    self.state.base64Code,
                    { 'encoding': FileSystem.EncodingType.Base64 }
                )
                    .then(() => {
                        this.setState({ loading: false })
                        Sharing.shareAsync(uri);
                    })

            })
            .catch(error => {
                console.error(error);
            });
    }

    return (
        <NativeBaseProvider>
            <Center mt="20">

                <Heading color="#0891b2">VCard Generator</Heading>

                <Box marginTop="5">

                    <QRCode value={input + '\n'} size={170} />

                </Box>
            </Center>

            <Box mt="5" width="90%" margin="auto" >

                <Text fontSize="md">Fill below parameters to generate your QR Code</Text>

                <FormControl>
                    <Stack>
                        <FormControl.Label >Text</FormControl.Label>
                        <Input placeholder='Enter Text' onChangeText={text => handleChange(text)} />
                    </Stack>
                </FormControl>

                <Button mt="5" onPress={share}>Download QR</Button>
                {/* <Text>{productQRref}</Text> */}
            </Box>
        </NativeBaseProvider>
    )
}

` 非常感谢您的帮助。

我已经使用 expo 文件系统完成了它。由于我使用 Expo 来创建我的应用程序，因此存在一些更改。

下面是生成 QR 码的代码，从 QR 码获取引用并将其更改为 svg 并在单击的按钮上启用共享选项。

import React, { useState, useRef } from 'react';
import {Box, Heading, Center, Button, NativeBaseProvider, Text, Input, FormControl, Stack} from "native-base";
import QRCode from 'react-native-qrcode-svg';
import * as FileSystem from 'expo-file-system;
import * as Sharing from 'expo-sharing';

export default function QrGenerator({ navigation }) {

    const [input, setInput] = useState("name");
    const [state, setState] = useState();
    let svg = useRef(null);
    let dataUrl = '';

    const handleChange = (text) => {
        setInput(text);
    }

    const getDataURL = () => {
        svg?.toDataURL(callback);
    };

    function callback(dataURL) {
        dataUrl = dataURL;
    }

    const image_source = 'https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80';

    const share = () => {
        getDataURL();
        setState({ loading: true })
        FileSystem.downloadAsync(
            image_source,
            FileSystem.documentDirectory + '.png'
        )
            .then(({ uri }) => {
                console.log(dataUrl);
                FileSystem.writeAsStringAsync(
                    uri,
                    dataUrl,
                    { 'encoding': FileSystem.EncodingType.Base64 }
                )
                    .then(() => {
                        setState({ loading: false })
                        Sharing.shareAsync(uri);
                    })

            })
            .catch(error => {
                console.error(error);
            });
    }

    return (
        <NativeBaseProvider>
            <Center mt="20">

                <Heading color="#0891b2">VCard Generator</Heading>

                <Box marginTop="5">

                    <QRCode value={input + '\n'} size={170} getRef={(c) => (svg = c)} backgroundColor="white" color="black" />

                </Box>
            </Center>

            <Box mt="5" width="90%" margin="auto" >

                <Text fontSize="md">Fill below parameters to generate your QR Code</Text>

                <FormControl>
                    <Stack>
                        <FormControl.Label >Text</FormControl.Label>
                        <Input placeholder='Enter Text' onChangeText={text => handleChange(text)} />
                    </Stack>
                </FormControl>

                <Button mt="5" onPress={share}>Share QR</Button>
            </Box>
        </NativeBaseProvider>
    )
}