将React Native打开失败：将图像保存到相机胶卷后为ENOENT（无此类文件或目录）

Question

我想在我的React Native应用程序中将视图之一保存为相机胶卷图像。 我正在使用相机胶卷保存图像。 我收到警报“图像保存成功”，但同时在屏幕上显示错误：“可能未处理的承诺拒绝（ID：2）：错误：/cacheDir/rn_image_picker_lib_temp_aefbf48e-3b44-461e-a9ec-d51ce0aefb4c.jpg：打开失败： ENOENT（没有这样的文件或目录）...”。

在下面，我粘贴了我的UploadScreen类的代码。 图片已保存，但文件大小等于0个字节，我无法打开它。

有人可以帮助我吗？

提前致谢

我在Android Manifest中添加了dependecy：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

这是我导入的库：

import React from 'react';
import { Text, TextInput, View, Button, Image, ImageBackground, StyleSheet, Alert, PermissionsAndroid } from 'react-native';
import { createAppContainer, StackNavigator } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { createStackNavigator } from 'react-navigation-stack';
import Icon from 'react-native-vector-icons/FontAwesome';
import DialogAndroid from 'react-native-dialogs';
import Sound from 'react-native-sound';
import * as ImagePicker from 'react-native-image-picker';
import CameraRoll from '@react-native-community/cameraroll';

上传屏幕代码：

class UploadScreen extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        filepath: {
            data: '',
            uri: ''
        },
        fileData: '',
        fileUri: ''
    }
}

static navigationOptions = ({ navigation }) => ({
    headerShown: false
});

showContact = () => {
    Sound.setCategory('Playback');

    var mySound = new Sound('sound.mp3', Sound.MAIN_BUNDLE, (error) => {
        if (error) {
            console.log('Blad wczytywania: ' + error);
            return;
        }
        else {
            mySound.play((success) => {
                if (success) {
                    console.log('Odtwarzanie')
                }
            })
        }
    });

    mySound.setVolume(1.0);
    mySound.release();
}

showDescription = () => {
    Sound.setCategory('Playback');

    var mySound = new Sound('sound.mp3', Sound.MAIN_BUNDLE, (error) => {
        if (error) {
            console.log('Blad wczytywania: ' + error);
            return;
        }
        else {
            mySound.play((success) => {
                if (success) {
                    console.log('Odtwarzanie')
                }
            })
        }
    });

    mySound.setVolume(1.0);
    mySound.release();

    Alert.alert('Aplikacja do generowania wlasnych memow', '1. Przeslij swoje zdjecie lub wybierz z jedno z dostepnych. \n 2. Napisz tekst. \n 3. Zapisz utworzony mem. \n\ 4. Udostepnij na swoich social mediach.');
}

selectImage = () => {
    let options = {
        storageOptions: {
            skipBackup: true,
            path: 'images',
        },
    };
    ImagePicker.launchImageLibrary(options, (response) => {
        console.log('Response = ', response);

        if (response.didCancel) {
            console.log('User cancelled image picker');
        } else if (response.error) {
            console.log('ImagePicker Error: ', response.error);
        } else if (response.customButton) {
            console.log('User tapped custom button: ', response.customButton);
            alert(response.customButton);
        } else {
            const source = { uri: response.uri };
            console.log('response', JSON.stringify(response));
            this.setState({
                filePath: response,
                fileData: response.data,
                fileUri: response.uri
            });
        }
    });

}

takePhoto = () => {
    let options = {
        storageOptions: {
            skipBackup: true,
            path: 'images',
        },
    };
    ImagePicker.launchCamera(options, (response) => {
        console.log('Response = ', response);

        if (response.didCancel) {
            console.log('User cancelled image picker');
        } else if (response.error) {
            console.log('ImagePicker Error: ', response.error);
        } else if (response.customButton) {
            console.log('User tapped custom button: ', response.customButton);
            alert(response.customButton);
        } else {
            const source = { uri: response.uri };
            console.log('response', JSON.stringify(response));
            this.setState({
                filePath: response,
                fileData: response.data,
                fileUri: response.uri
            });
        }
    });

}

renderImage() {
    if (this.state.fileUri) {
        return <Image ref="meme" source={{ uri: this.state.fileUri  }} 
            style={{ width: '100%', height: '100%', resizeMode: 'cover' }}
        />
    } else {
        return <Image ref="meme" source={require('./sources/1.jpg')}
            style={{ width: '100%', height: '100%', resizeMode: 'cover' }}
        />
    }
}

state = {
    top: '',
    bottom: '',
};

getPermissionAndroid = async () => {
    try {
        const granted = await PermissionsAndroid.request(
            PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
            {
                title: 'Image Save Permission',
                message: 'Your permission is required to save images to your device',
                buttonNegative: 'Cancel',
                buttonPositive: 'OK',
            },
        );
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
            return true;
        }
        Alert.alert(
            '',
            'Your permission is required to save images to your device',
            [{ text: 'OK', onPress: () => { } }],
            { cancelable: false },
        );
    } catch (err) {
        console.log('err', err);
    }
};

onSaveImage = async () => {
    try {
        var uri = this.state.fileUri;
        console.log(uri);

        if (Platform.OS === 'android') {
            const granted = this.getPermissionAndroid;
            if (!granted) {
                return;
            }
        }

        const image = CameraRoll.save(uri, 'photo');
        if (image) {
            Alert.alert(
                '',
                'Image saved successfully.',
                [{ text: 'OK', onPress: () => { } }],
                { cancelable: false },
            );
        }
    } catch (error) {
        console.log('error', error);
    }
};

render() {
    const { navigate } = this.props.navigation;
    const { top, bottom } = this.state;

    return (
        <View
            style={{
                flex: 1,
            }}>
            <ImageBackground style={styles.imgBackground}
                resizeMode='cover'
                source={require('./sources/background.jpg')}>
                <View
                    style={{
                        flex: 1,
                        flexDirection: 'row',
                        justifyContent: 'space-between',
                        alignItems: 'flex-end',
                    }}>
                    <Icon.Button style={{ right: -4 }}
                        name="info-circle"
                        onPress={this.showDescription} >
                    </Icon.Button>
                    <Icon.Button style={{ right: -4 }}
                        name="home"
                        onPress={() => navigate('Home')}
                    >
                    </Icon.Button>
                    <Icon.Button style={{ right: -6 }}
                        name="at"
                        onPress={this.showContact}
                    >
                    </Icon.Button>
                </View>
                <View style={{ flex: 2, alignItems: 'center', justifyContent: 'space-between', }}>
                    <TextInput underlineColorAndroid={'transparent'} style={styles.input} value={top} onChangeText={(top) => this.setState({ top })} placeholder={'Input top text here'} />
                    <TextInput underlineColorAndroid={'transparent'} style={styles.input} value={bottom} onChangeText={(bottom) => this.setState({ bottom })} placeholder={'Input bottom text here'} />
                </View>
                <View style={{ flex: 5, alignItems: 'center', justifyContent: 'space-between', }}>
                    {this.renderImage()}
                    <Text style={ styles.memeTop }>{top}</Text>
                    <Text style={styles.memeBottom}>{bottom}</Text>
                </View>
                <View style={{ flex: 2, alignItems: 'center', justifyContent: 'space-between', margin: 5}}>
                    <Button title="Select image file"
                        onPress={this.selectImage}
                    />
                    <Button title="Take a photo"
                        onPress={this.takePhoto}
                    />
                    <Button title="Save result"
                        //onPress={() => navigate('Result')}
                        onPress={this.onSaveImage}
                    />
                </View >
                <View style={{ flex: 0.3 }}>
                    <Text style={{
                        fontFamily: 'Impact', fontWeight: 'bold', fontSize: 10, textAlign: 'right', alignSelf: 'flex-end',
                        textShadowColor: 'black', textShadowOffset: { width: 10, height: 5 }, textShadowRadius: 10,
                        color: 'white', position: 'absolute', bottom: 0
                    }}>
                        Copyright all right reserved {'\u00A9'} 2021 Marek Przybylowski
                    </Text>
                </View >
            </ImageBackground>
        </View>
    );
}
}