react-native app落后于android

时间:2015-12-25 17:25:09

标签: android react-native

我在react-native上写了一个简单的应用程序。它由<ListView>组成,在行中显示<Image>。图像从网络中获取。它在iOS上运行得非常好。但是在Android上如果图像出现时会卡住。 FPS为0.9-3.2; 我使用systrace工具来弄清楚发生了什么。这是它的截图。

enter image description here

看起来一切都是在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}} />
}

我有一个填充,我错过了一些东西。有人可以帮我搞清楚到底是什么? 谢谢!

2 个答案:

答案 0 :(得分:2)

我最近遇到了同样的问题,弄清楚导致这个问题的原因以及解决方法(至少对我来说)。我知道这已经过时了,但是如果有人需要,我会把它留在这里。

原因

对我而言,这是来自网络的图像。它的分辨率很大(超过3000x4000),而我的<Image />组件的样式很小(确切地说是50x50)。

解决方案

专门针对Android的<Image />道具,resizeMethod(这与resizeMode不同)。我使用了resizeMethod: resize,该应用在Android上运行良好。这是documentation的更多信息。

答案 1 :(得分:-1)

尝试更改

 renderRow={this.renderRow.bind(this)}

renderRow={this.renderRow}