我在react-native上写了一个简单的应用程序。它由<ListView>
组成,在行中显示<Image>
。图像从网络中获取。它在iOS上运行得非常好。但是在Android上如果图像出现时会卡住。 FPS为0.9-3.2;
我使用systrace工具来弄清楚发生了什么。这是它的截图。
看起来一切都是在UI线程上完成的。
这是我班级的渲染功能:
render() {
return (
<View style={styles.container}>
<ListView
style={styles.list}
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
/>
</View>
);
}
renderRow(rowData) {
return <Image
style={{ width: 320, height: 320 }}
source={{uri: rowData.coverPhoto}} />
}
我有一个填充,我错过了一些东西。有人可以帮我搞清楚到底是什么? 谢谢!
答案 0 :(得分:2)
我最近遇到了同样的问题,弄清楚导致这个问题的原因以及解决方法(至少对我来说)。我知道这已经过时了,但是如果有人需要,我会把它留在这里。
原因
对我而言,这是来自网络的图像。它的分辨率很大(超过3000x4000),而我的<Image />
组件的样式很小(确切地说是50x50)。
解决方案
专门针对Android的<Image />
道具,resizeMethod
(这与resizeMode
不同)。我使用了resizeMethod: resize
,该应用在Android上运行良好。这是documentation的更多信息。
答案 1 :(得分:-1)
尝试更改
renderRow={this.renderRow.bind(this)}
到
renderRow={this.renderRow}