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 存储库中找到

Answer 1

加载不同分辨率的图像时可能会出现性能问题。您可以使用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}
      />

我从那个仓库复制了这个例子。您也可以在那里找到文档。尝试一下。它将提高图像加载性能。那么闪烁问题很可能就会得到解决。