如何在显示加载屏幕时加载图像反应本机

Question

我试图在删除加载屏幕之前在我的页面上加载个人资料照片，但不知道如何。 现在我的渲染 function 中有一个“if”语句，它要么返回加载屏幕，要么返回页面的 rest。

当我从 firebase 获取个人资料照片和用户名等的 URL 时，我会显示加载屏幕。 但我不知道如何在图像从 URL 下载到我的应用程序时显示相同的加载屏幕，因为我是在 JSX 代码中下载的。

这是我的渲染语句中的代码：

render(){
    if (this.state.loading == true) {
        return (
            //returns jsx of a full page loading screen
        )
    }
    return (
        <View style={{ justifyContent: 'center', alignItems: 'center', marginTop: 50, marginBottom: 50 }}>
            <Image style={{ width: 150, height: 150, borderRadius: 500 }} source={{ uri: this.state.userimage }} />
        </View>
    )
}

这段代码被简化了，但这基本上就是我正在做的。

现在，当我从 firebase 等加载 URL 时，会显示加载屏幕，但随后我设置了 this.state。加载屏幕仍然需要几秒钟，因为加载屏幕仍然是假的，但加载屏幕仍然没有已经加载。

有人可以告诉我如何在我的加载屏幕仍然打开时预加载图像或其他一些简单的方法来加载图像，然后立即显示它吗？

谢谢！

Answer 1

我将react-native-fast-image用于我的图像及其预加载function。

Answer 2

一种方法是在 DOM 调用它之前在后台获取图像。

下面是一些演示此功能的简单代码。

import React from 'react';

const IMAGE_URL = "https://via.placeholder.com/150";

const preloadImage = (url) => {
  return fetch(url);
}

export const App = (props) => {
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    // comment out this line and the image is not loaded until it is needed in the dom
    preloadImage(IMAGE_URL);

    setTimeout(() => setLoading(false), 3000);
    }, []
  );

  return (loading ? <span>Loading</span> : <img src={IMAGE_URL} />);
}