我的目标是每当从CameraRoll
到<Image/>
被触摸(TouchableHighlight)时,都在空白区域显示图像。我找不到任何执行此操作的教程,而且我对JavaScript只是了解一点,所以我决定在Stack Overflow中问一个问题。
我只想一个想法来实现这个目标。谢谢你们!
这是可以理解的图像,更像是Instagram。
这是我的代码:
state = {
photos: [],
index: null,
pickedImage: null
}
componentDidMount() {
requestExternalStoragePermission();
this.getPhotos();
};
setIndex = (index) => {
if (index === this.state.index) {
index = null
}
this.setState({ index })
};
getPhotos = () => {
CameraRoll.getPhotos({
first: 200,
assetType: 'All'
})
.then(res => {
this.setState({
photos: res.edges,
});
})
.catch((err) => {
console.log('Error image: ' + err);
});
};
render() {
return(
<View style={styles.container}>
<Image source={this.state.index} style={styles.image}/>
<ScrollView contentContainerStyle={styles.scrollView} showsVerticalScrollIndicator={false}>
{this.state.photos.map((photos, index) => {
return(
<TouchableHighlight
style={{opacity: index === this.state.index ? .5 : 1}}
onPress={() => this.setIndex(index)}
key={index}
underlayColor='transparent'
>
<Image
style={{width: width / 3, height: width /3}}
source={{uri: photos.node.image.uri}}
resizeMode='cover'
/>
</TouchableHighlight>
);
})}
</ScrollView>
</View>
);
}
答案 0 :(得分:1)
首先,您正在使用<Image source={this.state.index} style={styles.image}/>
的语法是 WRONG
它应该像<Image source={{uri : this.state.pickedImage}} style={styles.image}/>
您的状态最初包含3个值
state = {
photos: [],
index: null,
pickedImage: null
}
在您的<TouchableHighlight/>
按钮中,您将单击的图像的索引保存到状态,并在Image组件中传递了该索引。这不足以显示图像
解决方案
首先,您必须保存单击的图像以进行显示
onPress={() => this. setState({pickedImage: photos.node.image.uri})}
控制台日志this.state.pickedImage
将为您提供图像的uri
并将该uri传递给图片组件
<Image source={{uri : this.state.pickedImage}} style={styles.image}/>
最终代码如下
<ScrollView contentContainerStyle={styles.scrollView} showsVerticalScrollIndicator={false}>
{this.state.photos.map((photos, index) => {
return(
<TouchableHighlight
style={{opacity: index === this.state.index ? .5 : 1}}
onPress={() => this. setState({pickedImage: photos.node.image.uri})}
key={index}
underlayColor='transparent'
>
<Image
style={{width: width / 3, height: width /3}}
source={{uri: photos.node.image.uri}}
resizeMode='cover'
/>
</TouchableHighlight>
);
})}
</ScrollView>
<Image source={{uri : this.state.pickedImage}} style={styles.image}/>