在水平FlatList上反应本地滚动滞后

Question

我开始通过构建Reddit Client来学习本机响应。在一个组件中，我从Reddit加载了照片并将它们显示在水平FlatList中，但是当我滚动浏览列表时，FPS显着下降。

即使集成“ react-native-expo-image-cache”，我也会遇到相同的结果。我当时想使用“反应迅速的图像”，但我不想脱离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上产生巨大的差异。

更新后， 我建议使用React Native Image的FastImage insead 。