Question

我在react native中遇到问题，只要render（）中的任何状态发生变化，我的图像就会被重新加载。我将一个函数（返回随机图像网址）直接传递给图像uri。因为我正在使用嵌套列表＆amp;复杂的动态数据，我很难维护单独的变量来保存图像url＆amp;而不是传递给图像源。这个问题是否有解决方法.THANKS

Sample Code: UI
     <View>
     <Image  source={{uri:this.getImgUrl()}} 
     style={{ marginRight: 20, height: 200, width: 200 }} />
      <Text>{this.state.data}</Text>
     <Button  title="ADD"  onPress={ this.setState({data:this.state.data+1})} />
     </View>

 /////////////////////Function///////////////
 getImgUrl(){  
 return {uri:'https://picsum.photos/200/300?date='+
          new Date().toLocaleString()
 };

}

Answer 1

getImageUrl（）函数使用新的Date（）。因此，当状态改变时，将调用render函数，其中使用getImgUrl（）获取Image源。但是新的Date（）。toLocaleString（）总是以字符串格式给出最新的时间，这不会等于你以前的新的 Date（）。toLocaleString（），即你的旧URI和新URI不匹配。因此，每次状态更改时，都会从新URI加载新图像。

getImgUrl(){  
 return uri:'https://picsum.photos/200/300?date='+
          new Date().toLocaleString()
 };

将URI保存为某处的变量，在componentDidMount（）或constructor（）等中保存。

记录每个渲染的getImgUrl（）输出，并检查这是否是根本问题。

编辑：

使用React中的PureComponent，

如果你的React组件的render（）函数呈现相同的结果给出相同的道具和状态，你可以使用React.PureComponent 在某些情况下性能提升。

class ProductImage extends React.PureComponent {

  render () {
    <Image  
      source={{ uri: this.getImgUrl() }} 
      style={{ marginRight: 20, height: 200, width: 200 }} />
  }

  getImageUrl () {
    return 'https://picsum.photos/200/300?date=' + new Date().toLocaleString();
  }
}

使用此组件代替普通的Image组件，这样，当componentDidMount发生时，您的图像应该只渲染一次。从谷歌了解PureComponent的更多信息。希望这会有所帮助。

如果函数（返回随机图像url）作为uri param＆amp;国家改变了

1 个答案: