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

树森 Dev 提问于 2026-03-23 12:27:18 阅读 3

移动

我用 FlatList 渲染一个商品列表，数据量大概 200 条，每项都有图片和文字，滑动的时候特别卡，帧率掉得很厉害。试过加 keyExtractor 和 getItemLayout，也用了 React.memo 包裹子组件，但效果不明显。

是不是我的样式写得有问题？比如用了太多 flex 嵌套或者阴影？下面是我 item 的样式：

.item {
  flex-direction: row;
  padding: 12px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 10px;
}

听说 shadow 和 borderRadius 在安卓上性能很差，是不是得换成图片或者去掉？还有别的优化建议吗？

性能优化组件设计

我来解答赞 3 收藏

反馈

1 条解答

熙晨🍀 Lv1

试试去掉 box-shadow 和 border-radius，用图片代替阴影效果。不行再看看图片加载是否优化了，比如用 FastImage 组件。就这样

2026-03-23 13:01