我试图在AsyncStorage中存储一张图片,但我不知道该怎么做,我应该存储URI,还是路径?
我尝试的是一点废话,但我尝试了这个:
state = {
avatarSource: null,
avatarSource2: null,
}
constructor(props) {
super(props);
this.state = {
modalVisible: false,
images: [{
url: '',
}],
}
this.setModalVisible = this.setModalVisible.bind(this)
}
saveData() {
AsyncStorage.getItem("uri");
}
然后当我选择我的图像是使用这个:
selectImage = async () => {
ImagePicker.showImagePicker({ nodata: true, mediaType: 'photo' }, (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 {
// You can also display the image using data:
// const source = { uri: 'data:image/jpeg;base64,' + response.data };
this.setState({
avatarSource: response.uri,
});
this.saveData; //here is where i save the data...
}
});
}
然后当我加载页面的时候。。
componentWillMount() {
AsyncStorage.getItem('uri')
}
我的渲染是这样的。。
render() {
return (
<ScrollView>
<View style={styles.container}>
<View style={styles.avatarContainer}>
<TouchableOpacity onPress={() => {
this.setModalVisible(!this.state.modalVisible, this.state.avatarSource);
}}>
{
this.state.avatarSource && <Image source={{ uri: this.state.avatarSource }} style={styles.avatar} />
}
</TouchableOpacity>
</View>
<Button title="Seleciona a imagem" onPress={this.selectImage} />
<View style={styles.avatarContainer}>
<TouchableOpacity onPress={() => {
this.setModalVisible(!this.state.modalVisible, this.state.avatarSource2);
}}>
{
this.state.avatarSource2 && <Image source={{ uri: this.state.avatarSource2 }} style={styles.avatar} />
}
</TouchableOpacity>
</View>
<Button title="Seleciona a imagem" onPress={this.selectImage2} />
</View>
<Modal style={styles.modalImage}
animationType='slide'
transparent={false}
visible={this.state.modalVisible}>
<TouchableHighlight style={{ backgroundColor: 'black' }} onPress={() => {
this.setModalVisible(!this.state.modalVisible) + this.props.navigation.navigate('Cartão de Cidadão');
}}>
<Icon active name="close" size={30} style={{ textAlign: 'center', marginTop: 0, color: 'white' }} />
</TouchableHighlight>
<ImageViewer imageUrls={this.state.images} />
</Modal>
</ScrollView>
);
}
}
我做错了什么?谢谢大家。
3条答案
按热度按时间yrefmtwq1#
异步存储只能保存字符串。您可以将照片保存到文件系统。尝试使用此npm module
8yparm6h2#
简单修复,当你存储它到async和解析检索时,你必须stringfy:
存储图像选择器:
检索:
fiei3ece3#
await Image.prefetch(url);
您可以使用react native framework中的Image核心组件,其中给予了一个名为prefetch的方法,可以用来获取镜像的数据并将其存储在磁盘缓存中。
请查看文档www.example.com的链接https://reactnative.dev/docs/image#prefetch
我希望这对未来的读者有所帮助,如果我错了,请纠正我,或者如果需要,请提供建议。