Question

我正在努力获得列表视图执行者。

场景：我正在一个屏幕上加载大约100个列表项。切换到此屏幕时，视图中的所有内容都会完美呈现，但在视图生效之前，滚动条将冻结几秒钟，然后可用。

将图像更改为单数会导致列表视图充分发挥作用-这意味着所需的图像会引起问题。

每个项目仅包含以下内容：

缩略图图像（120像素见方，每个〜3kb）
标题（32个字符）
字幕（120个字符）

此列表视图中大约有100个项目（根本不是很多！）

所有图像都存储在应用程序本地，并通过require导入。

示例代码：

renderItem = (listItem) => {
    const { item, index } = listItem;

    return (
      <Item
        id={index}
        item={item}
        onPress={this.props.onPress}
      />
    );
}

render() {
  return (
    <FlatList
      data={this.props.data}
      renderItem={this.renderItem}
      keyExtractor={this.keyExtractor}
    />
  );
}

还有Item组件：

render() {
    const { item, onPress } = this.props;
    const imgSrc = getAvatar(item.avatar);

    return (
      <TouchableOpacity onPress={onPress.bind(this, id)} style={styles.section} activeOpacity={0.8}>
        <Image source={imgSrc ? imgSrc : defaultAvatar} style={styles.image} resizeMode={'contain'} />
        <View style={styles.container}>
          <Text style={styles.heading}>{item.name}</Text>
          <Text style={styles.body} numberOfLines={2}>{item.blurb}</Text>
        </View>
      </TouchableOpacity>
    );
}

getAvatar为：

export const getAvatar = name => ({
    ["john"]: require('../assets/images/john.jpg'),
    ["jane"]: require('../assets/images/jane.jpg'),
    ["smith"]: require('../assets/images/smith.jpg'),
    ... plus a lot more...
  })

我尝试将以下内容添加到FlatList中，但是性能只是不执行任何操作或在初始加载时被延迟：

removeClippedSubviews
initialNumToRender将此数字限制为较小的数字

由于Facebook / RN团队如何产生FlatList，以上只是一个问题。与iOS中的TableView不同，没有可回收的东西。所有项目都一次渲染。

我还尝试了https://github.com/Flipkart/recyclerlistview之类的其他库-虽然这提高了初始滚动可用性，但在快速滚动时，视图会掉很多帧并变得非常滞后。查看所有图像后，滚动就可以了，但这还不够好。

有什么解决方案可以优化用户体验吗？我很想废弃RN并转为原生-这是非常基本的功能...列表视图！

Answer 1

您是否尝试过根据docs预取图像？

Image.prefetch(url);

React Native Fast Image也非常适合大量文件。尽管它仅适用于使用react-native init创建的项目或弹出的Expo项目，但它需要链接本机代码。

通过预加载图像，性能应该会好很多。

反应本机：FlatList与要求图像不起作用

1 个答案: