在水平FlatList上反应原始滚动滞后

Question

我开始学习通过构建Reddit客户端来做出反应。在一个组件中，我从Reddit加载照片并将其显示在水平FlatList中，但是当我滚动列表时，FPS显着下降。

即使我整合了“react-native-expo-image-cache”，我也会遇到相同的结果。我正在考虑使用“react-native-fast-image”，但我不想脱离Expo，以便简化构建过程并避免安装Android Studio或XCode。

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

有什么方法可以改善我的表现吗？谢谢！

这是我的源代码：（https://snack.expo.io/BklplJQIz）

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>
        )}
      />
    );
  }
}

Answer 1

我正在使用FlatList制作图库，一些图像是高分辨率，我注意到滚动滞后和FPS显着下降;甚至应用程序崩溃有时。我也尝试过不同的库，但没什么用。然后我使用了React Native Image和resizeMethod设置为resize。试试吧，你会对FPS产生很大的不同。

更新我将建议使用qazxsw poi而不是React Native qazxsw poi。