Reactjs 在水平平面列表上反应本机滚动滞后

通过构建Reddit客户端，我开始学习react native。在一个组件中，我从Reddit加载照片并在水平平面列表中显示它们，但当我滚动列表时，FPS显著下降

即使在集成“react native expo image cache”时，我也会体验到相同的结果。我曾考虑使用“react native fast image”，但我不想为了简化构建过程和避免安装Android Studio或XCode而脱离Expo

我正在用Nexus 6P上的expo应用程序进行测试

有什么办法可以提高我的表现吗？ 谢谢

这是我的源代码：（）

import React，{Component}来自“React”；
从“react native”导入{View，Image，FlatList}；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={content:[]}；
}
componentDidMount（）{
取回（“https://www.reddit.com/r/pics/.json")
.then（response=>response.json（））
.然后（d=>{
这是我的国家({
内容：d.data.children.map（函数c）{
返回{
url:c.data.preview.images[“0”].source.url，
高度：c.data.preview.images[“0”]。source.height，
宽度：c.data.preview.images[“0”].source.width，
标题：c.data.title
};
})
});
})
.catch（错误=>{
控制台错误（error）；
});
}
render（）{
返回(
索引}
renderItem={（{item}）=>(
)}
/>
);
}
}

我正在使用平面列表制作图库，一些图像分辨率很高，我注意到滚动延迟和FPS显著下降；甚至应用程序有时也会崩溃。我也尝试了不同的图书馆，但都不管用。然后我使用React Native并将其设置为

resize

。试试看，你会发现FPS有很大的不同

已更新

---

我建议使用React Native的insead。

它解决了我在旧Android手机上的问题。非常感谢。

import React, { Component } from "react";
import { View, Image, FlatList } from "react-native";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { content: [] };
  }
  componentDidMount() {
    fetch("https://www.reddit.com/r/pics/.json")
      .then(response => response.json())
      .then(d => {
        this.setState({
          content: d.data.children.map(function(c) {
            return {
              url: c.data.preview.images["0"].source.url,
              height: c.data.preview.images["0"].source.height,
              width: c.data.preview.images["0"].source.width,
              title: c.data.title
            };
          })
        });
      })
      .catch(error => {
        console.error(error);
      });
  }
  render() {
    return (
      <FlatList
        style={{
          marginTop: 100,
          marginHorizontal: 8
        }}
        data={this.state.content}
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        keyExtractor={(item, index) => index}
        renderItem={({ item }) => (
          <View
            style={{
              height: 165
            }}
          >
            <Image
              source={{ uri: item.url }}
              style={{
                width: item.width / (item.height / 165),
                height: 165,
                marginRight: 8,
                borderRadius: 5
              }}
            />
            <View
              style={{
                position: "absolute",
                flex: 1,
                backgroundColor: "rgba(0,0,0,.4)",
                top: 0,
                left: 0,
                bottom: 0,
                right: 8,
                borderRadius: 5
              }}
            >
            </View>
          </View>
        )}
      />
    );
  }
}