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

Question

我开始通过构建 Reddit 客户端来学习 React Native。在一个组件中，我从 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 with resizeMethod 设置为 resize。试试吧，你会发现 FPS 有很大的不同。

已更新 我会推荐使用 FastImage insead of React Native Image.

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

React Native Scroll Lag on Horizontal FlatList

reactjs

react-native

reddit