react-native中如何保存和显示和图像？

Posted 2023-03-16

【中文标题】react-native中如何保存和显示和图像？

【英文标题】：How to save and display and image in react-native?

【发布时间】：2020-01-09 12:43:00

【问题描述】：

我有一个关于 react-native 的问题。我正在使用一个名为 "react-native-image-picker" 的模块来选择图像并将其显示在我的应用程序上。

现在我想要将它存储在某个地方（数据库或本地存储），当我再次打开应用程序时，我选择的图像应该在那里。但我不知道什么是最好的选择。

我已经尝试阅读诸如 react-native-fs 和 fetch-blob 之类的东西，但我猜它对我没有帮助。

最好的选择是什么？

谢谢。

【问题讨论】：

将结果值保存到本地存储并检索存储在存储中的数据。

【参考方案1】：

首先，根据条件渲染视图。例如，如果图像可用，则只需显示图像，否则显示 TouchableOpacity，这将有助于选择图片：

import React,  Component  from React;
import  View, TouchableOpacity, Text, Image  from 'react-native';
import ImagePicker from 'react-native-image-picker';
import AsyncStorage from '@react-native-community/async-storage';


class App extends Component 
    constructor(props) 
        super(props);
        this.state = 
            isImageAvailable: false,
            profilePic: null
        
    

    componentDidMount = () => 
        this.getImage();
    

    getImage = async () => 
        const profilePic = await AsyncStorage.getItem("profilePic");
        if (profilePic) 
            this.setState(
                isImageAvailable: true,
                profilePic: JSON.parse(profilePic)
            );
        
    

    selectProfilePic = () => 
        const options = 
            title: 'Select Avatar',
            storageOptions: 
                skipBackup: true,
                path: 'images',
            ,
        ;

        ImagePicker.showImagePicker(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);
             else 
                const source =  uri: response.uri ;

                // You can also display the image using data:
                // const source =  uri: 'data:image/jpeg;base64,' + response.data ;
                AsyncStorage.setItem("profilePic", JSON.stringify(source));
                this.setState(
                    profilePic: source,
                    isImageAvailable: true
                );
            
        );
    

    render() 
        return (
            <View>
                
                    this.state.isImageAvailable && (
                        <Image source=this.state.profilePic style= width: 200, height: 200  />

                    )
                

                
                    !this.state.isImageAvailable && (
                        <TouchableOpacity onPress=this.selectProfilePic>
                            <Text>Choose Profile Pic</Text>
                        </TouchableOpacity>
                    )
                
            </View>
        )
    
 

希望对您有所帮助。

【讨论】：

嘿，为什么你将await 与 AsyncStorage 一起使用？

因为是异步函数。

【参考方案2】：

您可以使用 realmdb 作为 Asyncstorage 的替代品。