react-native 应用程序滞后于 android答案

【问题标题】：react-native app lags on androidreact-native 应用程序滞后于 android
【发布时间】：2015-12-25 17:25:09
【问题描述】：

我在 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}} />
}

我有一个填充物，我错过了一些东西。有人可以帮我弄清楚到底是什么吗？谢谢！

【问题讨论】：

您是否尝试追踪问题是否与硬件相关？
我尝试将renderToHardwareTextureAndroid 设置为true，但没有停止
但这可能与任何一个设备的处理能力有关吗？您没有说您在哪个 Android/iPhone 上进行了测试。您应该确定问题是否与设备规格或 ReactAndroid 项目有关。
我尝试在 SGS4 和 Nexus 5 上运行此应用程序。它在两种设备上的运行方式相同。所以我认为这与设备性能无关。由于 systrace，很明显滞后是由于在 UI 线程上执行过多造成的。

标签： android react-native

【解决方案1】：

我最近遇到了同样的问题，并找出了导致此问题的原因以及如何解决它（至少对我而言）。我知道这是旧的，但我会把它留在这里以防有人需要它。

原因

对我来说这是来自网络的图像。它的分辨率很大（超过 3000x4000），而我的 <Image /> 组件的样式却很小（准确地说是 50x50）。

解决方案

<Image /> 有一个专门用于 Android 的道具，即 resizeMethod（这与 resizeMode 不同）。我使用了resizeMethod: resize，该应用程序在 Android 上运行良好。这是documentation了解更多信息。

【讨论】：

也为我工作，

【解决方案2】：

尝试改变

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

到

renderRow={this.renderRow}

【讨论】：