无法在本机反应中显示多个图像

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
    
);

【问题讨论】:

内部视图的 false this.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()
/>

【讨论】:

以上是关于无法在本机反应中显示多个图像的主要内容,如果未能解决你的问题,请参考以下文章

无法在本机反应中选择任何文档/图像(ANDROID 11)

在本机反应中使用地图功能时图像未显示

如何在本机反应中显示相机胶卷图像文件名列表

IOS 14图像渲染问题本机反应

无法在本机反应中加载静态图像

如何在本机反应中在图像周围浮动文本