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

这个问题我之前也踩过，确实挺烦的。200条数据本身不该卡成那样，渐变大概率是罪魁祸首。

先说渐变的处理。你那个linear-gradient在RN里不是原生CSS，用的是react-native-linear-gradient库对吧？这玩意儿每次渲染都要重新计算渐变像素，滚动时不断触发很伤性能。最直接的办法是用图片代替渐变——把那个渐变做成一张小图，用ImageBackground包一下，性能会好很多。如果必须用渐变，至少确保你的LinearGradient组件不要在每次render时都重新创建，可以提到组件外部定义。

然后FlatList这边，除了你已经加的两个，还有几个参数很有用：

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

  length: 你的item高度,

  offset: 你的item高度 * index,

  index,

})}

这个避免RN动态去算高度，对低端机很关键。

maxToRenderPerBatch={10}

windowSize={10}

updateCellsBatchingPeriod={50}

removeClippedSubviews={true}

这几个一起加上，能明显减少每次渲染的item数量。

还有一点，你的Item组件最好用React.memo包一下，防止父组件刷新时连带重渲染所有item：

const Item = React.memo(({ data }) => {

  // 你的item内容

})

你可以先试试把渐变换成图片，加个getItemLayout，基本就能流畅了。高端机可能看不出差别，但低端机效果很明显。

渐变背景确实是掉帧的原因之一。linear-gradient 在每帧渲染时都要重新计算，低端机扛不住。

解决方案：用图片代替渐变，或者用纯色+伪元素

最直接的办法是把渐变做成一张小图，用 ImageBackground 包裹：

// 用一张1px宽的渐变图，平铺作为背景

const gradientImg = require('./gradient.png');



function ListItem({ item }) {

  return (

    
      source={gradientImg} 

      style={styles.item}

      resizeMode="stretch"

    >

      {item.name}

    

  );

}



const styles = StyleSheet.create({

  item: {

    padding: 16,

    borderRadius: 8,

    marginBottom: 12,    overflow: 'hidden', // 重要

  },

});

或者更偷懒的做法——直接用个纯色，性能最好：

const styles = StyleSheet.create({

  item: {

    backgroundColor: '#feb47b', // 渐变尾色作为主色

    padding: 16,

    borderRadius: 8,

    marginBottom: 12,

  },

});

其他优化点你也检查一下：

getItemLayout 固定行高，这个对 FlatList 性能提升巨大：

  data={products}

  keyExtractor={item => item.id}

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

    length: 80, // 你的item高度

    offset: 80 * index,

    index,

  })}

  initialNumToRender={10}

  maxToRenderPerBatch={10}

  windowSize={10}

  removeClippedSubviews={true} // 安卓上很有效

/>

还有检查一下 item 里的组件数量，如果嵌套层级太深或者有太多 View，也会卡。200条数据其实不算多，渐变问题解决掉应该就流畅了。