如何在React Native中使用Image.prefetch的结果？

Question

我试图在入门级组件中使用Image.prefetch()预取图像，这样当用户导航到显示上述图像的子组件时，它就可以显示了延迟较少。

在React Native文档中的Image主题下提到了

Image.prefetch()，但我发现那里的例子相当复杂。

使用此功能的人是否可以解释它如何适用于我上面提到的简单用例？

以下是我尝试实施的方法：

 // main.js

class Main extends Component {
    render() {
        let prefetch = Image.prefetch(this.props.url);
        return (
            <Content imgUrl={this.props.url}/>
        );
    }
}



// content.js
class Content extends Component {
    render() {
        const { imgUrl } = this.props;
        return (
            <Image source={imgUrl} />
        );
    }
}

此实现的结果是一个空的Image，因为它只返回一个没有Image的promise。

我在这里缺少什么？

Answer 1

在解析预取后，您需要呈现内容：

＆＃13;

＆＃13;

render() {
    Image.prefetch(this.props.url)
        .then(() => {
            return (
                <Content imgUrl={this.props.url} />
            );
        })
        .catch(error => console.log(error))
}

＆＃13;

＆＃13;

＆＃13;

您还可以在Main渲染中预览ActivityIndi​​cator，条件是在解析预取时更改其标志（true / false）的状态变量，以便指示符在该事件上消失。