无法在本机反应中显示多个图像
Posted
技术标签:
【中文标题】无法在本机反应中显示多个图像【英文标题】:Unable to show multiple images in react native 【发布时间】:2020-01-24 16:21:59 【问题描述】:我正在开发一个反应原生应用程序。我必须显示多个图像。我的代码是:
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
);
【问题讨论】:
内部视图的 falsethis.props.data
检查由于外部的真值检查而无法访问。我怀疑你可能有一些 CSS 样式问题,你能提供一个更完整的例子来重现你的问题吗?整个组件代码、样式表等。
哦,谢谢你发现这个问题,我会更新代码。我已经编辑了问题并添加了 CSS 代码 @DrewReese
【参考方案1】:
render()
return (
<View style= flex: 1, flexDirection:'row'>
data.map((value, i) =>
return (
<View key=i>
<TouchableOpacity>
<Image
source= uri: value.imageUrl
style= width: 50, height: 50
resizeMode="stretch"
/>
</View>
</TouchableOpacity>
);
)
</View>
);
【讨论】:
【参考方案2】:尝试使用平面列表
<FlatList
data=this.props.data
extraData=this.state
renderItem=( item ) =>
return (
<View>
<TouchableOpacity onPress=() => this.setState(zoom: img.image)>
<Image
source= uri: item.image
PlaceholderContent=<ActivityIndicator />
/>
</TouchableOpacity>
</View>
)
keyExtractor=(item, index) => index.toString()
/>
【讨论】:
以上是关于无法在本机反应中显示多个图像的主要内容,如果未能解决你的问题,请参考以下文章