Question

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

即使我整合＆＃34; react-native-expo-image-cache＆＃34;我经历了相同的结果。我正在考虑使用＆＃34; react-native-fast-image＆＃34;但我不想脱离世博会，以便简化构建过程并避免安装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

I was making gallery using FlatList, some of images were high resolutions and I noticed the scroll lag and FPS drops significantly; even app crash sometime. I tried different libraries too but nothing work. Then I used React Native Image with resizeMethod set to resize. Try it you will fine huge difference in FPS.

Updated I will recommend to use FastImage insead of React Native Image.

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

1 个答案: