Изменить источник изображения с помощью другого удаленного URI отображает предыдущий источник изображения при загрузке - PullRequest
Новая
       25

Изменить источник изображения с помощью другого удаленного URI отображает предыдущий источник изображения при загрузке

0 голосов
/ 06 сентября 2018

У меня есть следующая обертка. 

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 s. Затем я перехожу на другую страницу, чтобы создать новое сообщение, и когда я возвращаюсь, я перезагружаю исходную страницу, которая получает новые данные с сервера, так что теперь я получил +1 сообщение.

Однако до загрузки новых удаленных изображений отображаются предыдущие, и в результате все выглядит странно (каждое сообщение отображает изображение предыдущего). Так как это так, я решил отобразить промежуточное изображение при загрузке. Это, однако, не работает, даже если при изменении состояния source изменяется на путь к loadingImage (число по существу).

Это трудно объяснить словами ..

Я думал, что loadingIndicatorSource или defaultSource будет всегда отображаться во время загрузки, но, например, в случае defaultSource он отображается только в первый раз.

P.S .: Я использую FlatList для отображения сообщений, может быть, что-то используется повторно?

...