React Native 列表滚动卡顿怎么优化？

小艺嘉提问于 2026-03-21 01:07:18 阅读 51

框架

我用 FlatList 渲染一个商品列表，数据大概有 200 条，滑动的时候明显掉帧，特别卡。试过加 keyExtractor 和 initialNumToRender，但效果不明显。

每个列表项里有图片、文字和几个按钮，图片用了 react-native-fast-image。是不是应该用 getItemLayout？或者还有别的优化手段？

现在的 renderItem 是这样写的：

const renderItem = ({ item }) => (
  <View style={styles.item}>
    <FastImage source={{ uri: item.image }} style={styles.image} />
    <Text>{item.title}</Text>
    <Button title="收藏" onPress={() => handleFavorite(item.id)} />
  </View>
);

性能优化

我来解答赞 6 收藏

反馈

2 条解答

萌新.春艳 Lv1

优化 React Native 的 FlatList 滚动卡顿问题，可以试试以下几个方法：

一般这样处理，先从 getItemLayout 开始。这个能帮助 FlatList 更快地计算每个 item 的位置，减少渲染时的计算量。

const getItemLayout = (data, index) => ({

  length: ITEM_HEIGHT,

  offset: ITEM_HEIGHT * index,

  index,

});



<FlatList

  data={data}

  renderItem={renderItem}

  keyExtractor={(item) => item.id.toString()}

  initialNumToRender={10}

  getItemLayout={getItemLayout}

/>

确保 ITEM_HEIGHT 是一个固定的值，如果是动态高度，这种方法就不适用了。

另外，检查一下图片的大小和数量。虽然你用了 react-native-fast-image，但如果图片太大，加载时还是会卡顿。尽量压缩图片，或者用 CDN 进行图片懒加载。

最后，看看是否可以在 renderItem 里做更多的优化。比如避免在 renderItem 里创建新的对象或数组，这些都会导致不必要的重新渲染。尽量保持渲染逻辑简洁高效。

如果以上方法还是不行，考虑使用虚拟列表库，比如 react-window 或 react-virtualized，这些库专门用于处理大数据量下的性能问题。不过这会增加一些复杂性，权衡一下利弊再决定吧。

2026-03-24 19:00

令狐朝炜 Lv1

遇到 React Native 列表滚动卡顿的问题，确实头疼。你已经尝试了一些基础优化手段，比如 keyExtractor 和 initialNumToRender，但效果有限。接下来可以考虑以下几个方向：

1. 使用 getItemLayout：这个方法可以帮助 FlatList 更快地计算出列表项的位置，减少重新渲染的次数。你需要提供每个列表项的高度，如果高度固定的话，这个优化效果会非常明显。

2. 优化图片加载：虽然你已经在使用 react-native-fast-image，但还可以进一步检查图片的大小和格式。确保图片经过压缩，并且使用适合移动设备的格式，比如 WebP。

3. 虚拟化列表：FlatList 默认开启虚拟化，但有时候需要手动确认是否生效。确保 removeClippedSubviews 属性设置为 true（在 Android 上默认是 false），并且 maxToRenderPerBatch 和 windowSize 设置得当。

4. 代码拆分：将 renderItem 中的内容拆分成更小的组件，确保每个组件尽可能简单，避免不必要的状态更新和渲染。

关于 getItemLayout，你可以这样实现：

const getItemLayout = (data, index) => ({

  length: ITEM_HEIGHT,

  offset: ITEM_HEIGHT * index,

  index,

});




  data={data}

  renderItem={renderItem}

  keyExtractor={item => item.id}

  initialNumToRender={10}

  getItemLayout={getItemLayout}

/>

这里的 ITEM_HEIGHT 是你每个列表项的高度，如果高度不固定，这个优化就不适用了。希望这些建议能帮助你解决问题。

2026-03-21 02:04