如何在AsyncStorage中存储图像？

Question

我试图在 AsyncStorage 中存储图片，但我不知道该怎么做，我应该存储 uri 还是路径？

\n\n

我尝试过的有点废话，但我尝试过这个：

\n\n

state = {\n    avatarSource: null,\n    avatarSource2: null,\n}\n\nconstructor(props) {\n    super(props);\n    this.state = {\n        modalVisible: false,\n        images: [{\n            url: \'\',\n        }],\n    }\n    this.setModalVisible = this.setModalVisible.bind(this)\n}\n\nsaveData() {\n    AsyncStorage.getItem("uri");\n}\n

\n\n

然后当我选择我的图像时使用这个：

\n\n

selectImage = async () => {\n    ImagePicker.showImagePicker({ nodata: true, mediaType: \'photo\' }, (response) => {\n        console.log(\'Response = \', response);\n\n        if (response.didCancel) {\n            console.log(\'User cancelled image picker\');\n        } else if (response.error) {\n            console.log(\'ImagePicker Error: \', response.error);\n        } else if (response.customButton) {\n            console.log(\'User tapped custom button: \', response.customButton);\n        } else {\n\n            // You can also display the image using data:\n            // const source = { uri: \'data:image/jpeg;base64,\' + response.data };\n\n            this.setState({\n                avatarSource: response.uri,\n            });\n            this.saveData; //here is where i save the data...\n        }\n    });\n}\n

\n\n

然后当我加载页面时...

\n\n

componentWillMount() {\n    AsyncStorage.getItem(\'uri\')\n\n\n}\n

\n\n

我的渲染是这样的......

\n\n

render() {\n    return (\n        <ScrollView>\n            <View style={styles.container}>\n                <View style={styles.avatarContainer}>\n                    <TouchableOpacity onPress={() => {\n                        this.setModalVisible(!this.state.modalVisible, this.state.avatarSource);\n                    }}>\n                        {\n                            this.state.avatarSource && <Image source={{ uri: this.state.avatarSource }} style={styles.avatar} />\n                        }\n                    </TouchableOpacity>\n                </View>\n                <Button title="Seleciona a imagem" onPress={this.selectImage} />\n                <View style={styles.avatarContainer}>\n                    <TouchableOpacity onPress={() => {\n                        this.setModalVisible(!this.state.modalVisible, this.state.avatarSource2);\n                    }}>\n                        {\n                            this.state.avatarSource2 && <Image source={{ uri: this.state.avatarSource2 }} style={styles.avatar} />\n                        }\n                    </TouchableOpacity>\n                </View>\n                <Button title="Seleciona a imagem" onPress={this.selectImage2} />\n            </View>\n            <Modal style={styles.modalImage}\n                animationType=\'slide\'\n                transparent={false}\n                visible={this.state.modalVisible}>\n                <TouchableHighlight style={{ backgroundColor: \'black\' }} onPress={() => {\n                    this.setModalVisible(!this.state.modalVisible) + this.props.navigation.navigate(\'Cart\xc3\xa3o de Cidad\xc3\xa3o\');\n                }}>\n                    <Icon active name="close" size={30} style={{ textAlign: \'center\', marginTop: 0, color: \'white\' }} />\n                </TouchableHighlight>\n                <ImageViewer imageUrls={this.state.images} />\n            </Modal>\n        </ScrollView>\n    );\n}\n

\n\n

}

\n\n

我做错了什么？\n谢谢。

\n

Answer 1

异步存储只能保存字符串。您可以将照片保存到文件系统。尝试使用这个npm 模块