使用不同的远程uri更改图像的来源，并在加载时显示先前的图像来源

Question

我有以下包装纸。

import loadingImage from '../assets/icons/loadingImage.png';

class RemoteImage extends React.Component {

  constructor() {
    super();
    this.state = { loading: false }
  }

  render() {

    let { source } = this.props;
    if (this.state.loading) source = loadingImage

    return (
      <Image
        resizeMode={"cover"}
        style={somestyle}
        onLoadStart={() => {this.setState({ loading: true }) }}
        onLoadEnd={() => {this.setState({ loading: false }) }}
        source={source}
        {...this.props}
      >
      </Image>
    )
  }
}

我之所以这样做，是因为我有一个消息视图，该视图呈现了RemoteImage的列表。然后，我转到另一个页面以创建新消息，当我回来时，我重新加载了原始页面，该页面从服务器获取了新数据，所以现在我收到了+1消息。

但是，在加载新的远程映像之前，将显示以前的映像，结果看起来很奇怪（每个消息都显示上一个的映像）。因此，既然是这种情况，我决定在加载时显示中间图像。但是，即使状态更改，source更改为loadingImage的路径（本质上是一个数字），这也无法正常工作。

这很难用语言解释。

我认为loadingIndicatorSource或defaultSource会在加载时始终显示，但例如在defaultSource的情况下，它只会在第一次显示。

PS：我正在使用FlatList来呈现消息，也许某些东西正在被重用？