Изображение мерцает при первой загрузке в ReactNative

Question

Я пытаюсь создать приложение ReactNative с анимированной кнопкой. Проблема в том, что эта анимация не работает правильно в первый раз после запуска приложения. Есть немного белого мерцания. Но после запуска анимации в первый раз все работает как положено:

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

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

import React, { Component } from 'react';
import {StyleSheet, Text, TouchableWithoutFeedback, View, Image, ScrollView, 
Button, BackHandler} from 'react-native';

export default class Touchables extends Component {
  constructor(props) {
    super(props);
    this.state = {alarm1: (<Image source={require("./assets/alarmoff.png")} 
  style={styles.imageButton}/>),

    }
  }

  componentWillMount(){
  //trying to preload all Images, but it does not help.
    (<Image source={require("./assets/alarmon.png")} style= 
      {styles.imageButton}/>)
  }

  render() {
    return (
      <ScrollView style={styles.contentContainer}>

     <View style={{flex: 3, flexDirection: 'row'}}>
        <View style={styles.container}>
          <TouchableWithoutFeedback onPressIn={() => this.setState({alarm1: 
             <Image source={require("./assets/alarmon.png")} style={styles.imageButton}/>})} onPressOut={() => this.setState({alarm1:  <Image source={require("./assets/alarmoff.png")} style={styles.imageButton}/>})}>
            <View style={styles.button}>
              {this.state.alarm1}
            </View>
          </TouchableWithoutFeedback>
          <Text style={styles.text}>This button flickers on first click. Restart App completly to see the issue. Reloading is not enough.</Text>
        </View>
       </View>
       <View>
        <Button
         onPress={() => BackHandler.exitApp()}
         title="Exit App"
         color="#841584"
         accessibilityLabel="Android only I guess."
        />
       </View>

     </ScrollView>
   );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 2,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 30
 },
 button: {
    backgroundColor: '#fff',
    borderRadius: 20,
    padding: 10,
    marginBottom: 20,
    shadowColor: '#303838',
    shadowOffset: { width: 0, height: 5 },
    shadowRadius: 10,
    shadowOpacity: 0
  },
  contentContainer: {
    paddingVertical: 20,
    flex: 1,
    backgroundColor: '#fff',
  },
 text:{
    color: '#000',
    marginBottom: 30
 },
 imageButton: {
   flex: 1,
   width: 240,
   height: 200,
   marginBottom: -15,
   marginTop: 10,
   resizeMode: 'cover'
 }
});

Итак, мой вопрос: как я могу остановить мерцание изображения после запуска приложения?

Полная версия небольшого демонстрационного приложения, созданного мной, чтобы показать мою проблему, доступна в моем Github Repository

Answer 1

Ну, у меня есть обходной путь (вроде ...). В моем componentDidMount() я теперь устанавливаю кнопку в нажатом состоянии, подожду некоторое время, пока изображение не отобразится и не масштабируется, а затем я снова установил состояние в выключенное состояние, например:

componentDidMount(){
   this.setState({alarm1: <Image source={require("./assets/alarmon.png")} style={styles.imageButton}/>})
   setTimeout(()=>{this.setState({alarm1: <Image source={require("./assets/alarmoff.png")} style={styles.imageButton}/>})}, 1000); 
}

Я пытался уменьшить тайм-аут до секунды, но затем на моем старом (и медленном) телефоне снова начиналось мерцание при первом нажатии после загрузки приложения.

Это, очевидно, приводит к изменению состояния кнопки после загрузки приложения, но если, по моему мнению, все кнопки мерцают один раз после запуска приложения, это лучше, чем каждая кнопка мигает при первом нажатии.

Однако я был бы рад, если бы кто-нибудь мог сказать мне реальный путь, как решить эту проблему.

Answer 2

Если вы используете выставку, вы можете использовать Asset.loadAsync. Смотри: https://docs.expo.io/versions/latest/sdk/asset.

В App.js мне нравится ждать загрузки всех статических ресурсов, прежде чем показывать какой-либо экран.

Answer 3

При загрузке изображений с разным разрешением может возникнуть проблема с производительностью. Вы можете использовать модуль https://github.com/DylanVann/react-native-fast-image для загрузки изображений.

Вы можете добавить и связать его, как показано ниже

# Install
yarn add react-native-fast-image

# Automatic linking. (other linking methods listed below)
react-native link react-native-fast-image

после этого вы можете импортировать его и использовать, как показано ниже

import FastImage from 'react-native-fast-image'

    const YourImage = () =>
      <FastImage
        style={styles.image}
        source={{
          uri: 'https://unsplash.it/400/400?image=1',
          headers:{ Authorization: 'someAuthToken' },
          priority: FastImage.priority.normal,
        }}
        resizeMode={FastImage.resizeMode.contain}
      />

Я скопировал этот пример из этого репо. вы также можете найти документацию там. Попытайся. Это увеличит производительность загрузки изображения. Тогда, скорее всего, проблема мерцания будет решена.