React Native - 在渲染前准备图像

过去几天我一直在努力寻找解决问题的方法。我需要每次显示一个图像>组件一个（要求，因此ListView不是一个选项）。此组件具有指向Firebase图像的URI。我想在componentWillMount准备一个包含了所有将被显示如组件图片数组：React Native - 在渲染前准备图像

let mediaArray = this.props.list.map(function(media){ 
    return <Image style={styles.imageStyle} source={{uri: media}} />; 
}); 
this.setState({list: mediaArray});

然而，当我尝试在渲染功能，我还需要到阵列上显示特定图像等待几秒钟即可看到图像。

render(){ 
    {this.state.list[currentIndex]} 
}

如果以前准备好了，为什么它会再次尝试获取图像？这表明React只在渲染时查找源代码？

你可以说我正在尝试创建一个“Feed”（比如instagram，facebook等），但不是传统的，因为我需要一次显示一个图像组件。

我也尝试调查缓存图像，但这不会帮助我，因为在现实中我会试图获得数百个图像。

来源

2017-06-23 Joseph

您意识到React Native在呈现之前不会为您的图像获取图像来源。如果您要预先加载图像，则必须在图像源上拨打prefetch。使用代码一个简单的例子将modifywhere创建mediaArray看起来像这样：

let mediaArray = this.props.list.map(function(media){ 
    Image.prefetch(media); // that's it! 
    // you can now remove this following line and just construct a single image tag later. 
    return <Image style={styles.imageStyle} source={{uri: media}} />; 
}); 
this.setState({list: mediaArray});

，如果你想多一点聪明，你可以预取只有几个即将到来的图像每次currentIndex更新的。如果您需要更多指导，请分享更多此组件的代码。

希望这会有所帮助！

来源

2017-06-23 02:53:48

嗯，我实际上尝试了这种预取方式，并没有工作，我仍然看到负载延迟。据我所知prefetch将映像存储到磁盘缓存中。那么如果你不知道它存储在哪里，你究竟如何使用它？ – Joseph

另外，您以后构建单个图像标签意味着什么？ “媒体”基本上就是乌里。 – Joseph

React Native - 在渲染前准备图像

回答

相关问题