Question

我真的没有大量的代码，所以这可能不是问这个问题的理想场所..但我需要帮助试图找出某种解决方案..

我在该州存储了一系列网址。

   <TouchableHighlight style={ styles.container } onPress={this.screenTap.bind(this)}> 
        <Image source={{uri: this.state.picCollection[this.state.counter].Picture }} style={styles.backgroundImage} >
          <View style={ styles.loginForm }>
          <Button onPress={this.screenTap.bind(this)} style={{ alignSelf: 'center', marginTop: 20, marginBottom: 20 }}>Create</Button>
            <Text style={ styles.text }>Some text</Text>
          </View>
        </Image>
        </TouchableHighlight>

这个screenTap函数是onPress刚刚开始，改变我们从this.state.picCollection加载哪个url

以上代码的工作原理是每次按下它时都要切换图像显示。但是，当我这样做而不是无缝转换时，它会在加载前显示此白色屏幕。

我猜这是因为我每次都这样做，我正在重新加载状态。但是，我不确定如何处理这样的事情。

任何建议都会很棒！

Answer 1

当您在React中更改其中一个道具或状态变量时，受影响的组件会重新渲染。从浏览器的角度来看，一个图像消失，另一个图像出现在它的位置。

这对您来说意味着每次更改网址时，之前没有的图片都是，并且需要重新加载。我非常确定白色闪光灯是什么 - 浏览器加载新图像。

幸运的是，您可以在不显示图像的情况下加载图像。 This page提供了一些很好的技巧，但最基本的是只需要为要加载的每个图像添加N图像标记。创建一个由display: none组成的CSS类，并将其应用于这些图像。当当！图像被加载和缓存，但用途并没有看到任何图像。

然后，当您的Image组件将其src标记更改为您之前准备的某个图像时，浏览器已将该图像保留在内存中，因此应立即加载。（只需确保完全相同的网址！）

加载动态图片

1 个答案: