小编Joh*_* Ng的帖子

我正在尝试使用RN0.43中的FlatList渲染3列中约250个图像的列表,并且我更改FlatList的onLayout函数中的图像宽度以适合屏幕的宽度.

初始性能还可以,但是在向上/向下滚动一些之后,有时需要一秒钟或2秒才能显示图像.

如果我改为屏幕方向则更糟糕,更新屏幕需要2~3秒.

一些发现:

1. 在屏幕旋转之后,直到调用FlatList.onLayout需要一秒或2秒

2. 在FlatList.onLayout和图像宽度更新之后,每个图像(大约一半的列表,~150个图像;虽然只显示~15个)渲染2~4次,而render()只调用一次.

题:

1. 如何修改代码以提高性能？
2. 在多列列表的getItemLayout()中,偏移量应该是(itemHeight + separatorHeight)*(index%numColumns)吗？

谢谢.

测试:GalaxySII(4.1.2)和Android SDK模拟器(7.1.1)

var data = [
    require('./res/img/Search.png'),
    require('./res/img/test - Copy.png'),
    // ~250 items
    ...];

class app extends React.Component {
    renderItem (info, width) {
        console.log('renderItem', info.index);
        if(width !== this.width) {
            this.imageStyle = {width: width-MarginHorizontal , height: width-MarginHorizontal, resizeMode: 'contain'};
        }
        return (
            <Image
                source = {info.item}
                key = {info.index}
                style={this.imageStyle}/>
            );
    }

    render() {
        console.log('Test.render');
        return (
            <View style={{
                flex: 1,
                flexDirection: 'row',
                justifyContent: 'flex-start',
                alignItems: 'center',
                backgroundColor: '#F5FCFF' …

图像组件是否有分辨率限制或图像文件限制？它是什么？还是设备的限制造成的？我尝试在我的应用程序中显示尺寸为 3992x2992、文件大小为 3.24MB 的图像，但失败了。我尝试将文件进一步压缩到 300kB，但仍然失败。

<Image style = {{width: 200, height: 100}} source = {require('./res/img/20160731175405-c7bf89df.jpg')}> </Image>

ReactNative：0.42 设备：Galaxy SII