我正在开发一个反应本机应用程序。我必须显示多个图像。我的代码是:
render() {
if (!this.props.data) {
return(<Text style={styles.noIMG}>Keine Bilder vorhanden</Text>)
}
return (
<View>
<View style={styles.view}>
{
(
this.props.data == '' ||
this.props.data == null ||
this.props.data == undefined
) ? null :
this.props.data.map(img => {
console.log(img.image);
console.log("Image displayed");
return(
<TouchableHighlight
key={this.uuidv4()}
onPress={()=>{
this.setState({zoom: img.image})
}}
>
<Image
style={styles.imagePreview}
source={{uri: img.image}}
/>
</TouchableHighlight>)
})
}
</View>
{ this.state.zoom ?
<Card>
<PinchZoomView scalable={false}>
<FitImage resizeMode="contain" source={{uri: this.state.zoom}}/>
</PinchZoomView>
<TouchableOpacity
style={styles.btn}
onPress={() => this.deleteImage(this.state.zoom)}>
<Text style={{color:'white'}}>Delete Image</Text>
</TouchableOpacity>
</Card> :
<View style={styles.container}><Text>Bild zum vergrößern antippen.</Text></View>
}
</View>
);
}
我确实在“props.data”中获得了两张图像,但在屏幕上只显示了一张图像。CSS代码是:
const styles = StyleSheet.create({
imagePreview:{
width: 100,
height: 100,
margin: 5
}
});