Предварительная загрузка, кэширование GIF-изображений, чтобы избежать мерцания в React Native - PullRequest
Новая
       31

Предварительная загрузка, кэширование GIF-изображений, чтобы избежать мерцания в React Native

0 голосов
/ 11 марта 2020

Я пытаюсь создать анимацию в реактивном нативе, где персонаж делает несколько взлетов sh. Переход вверх и вниз выполняется в тот момент, когда я хочу.

Итак, я разделил анимацию GIF на 2 GIF, без повторений. Один, чтобы заставить его идти вверх, и другой, чтобы заставить его идти вниз. Эти изображения хранятся локально

Проблема в том, что при смене gif возникает мерцание.

Я пытался реагировать -fast-image, но анимация GIF слишком медленная и GIF автоматически зацикливается. Я попытался поместить изображение перехода в meatime, изображения переключаются, но все еще поведение мерцания. Обратный вызов изображения onLoadEnd, кажется, вызывается слишком рано, до того, как изображение на самом деле заканчивается загрузкой.

вот как я переключаю изображения 

if (up.includes(this.props.timer))
                this.setState({ currentGif: upGif, cacheImage: downPng })
if (down.includes(this.props.timer))
          this.setState({ currentGif: downGif, cacheImage: upPng })

Вот рендер: 

render() {
    return (
        <View
            style={{ position: 'absolute', bottom: 70 }}
        >
            <Image 
                source={this.state.cacheImage}
                style={{ width: 400, height: 330, position: 'relative', bottom: 70 }}
                fadeDuration={0}
            />
            <Image
                source={this.state.currentGif}
                style={{ width: 400, height: 330, position: 'absolute', bottom: 70 }}
                fadeDuration={0}
                onLoadEnd={() => {this.setState({cacheImage: null})}}  // the Image should be loaded so I can hide the cache Image, but it desapear before the gif is loaded
            />
        </View>
    )
}

1 Ответ

0 голосов
/ 12 марта 2020

Вы можете использовать API Image.getSize.

Чтобы получить размер, RN загружает и кэширует изображение. В документации указано, что этот метод можно использовать для предварительной загрузки изображений. Они также упоминают, что в будущем будет предоставлен более явный API, так что вы можете использовать его сейчас и перейти на более качественный API, когда он будет доступен.

...