React Native中如何用FlatList/VirtualizedList仅渲染第一项

当然可以用FlatList实现只渲染第一项！这里有两种简单的方案，推荐第一种更高效的实现方式：

方法1：直接截取数据数组的第一项 #

最直接且性能最优的方式，是给FlatList的data属性传入仅包含第一个元素的子数组，让FlatList只处理这一项数据。修改你的代码如下：

<FlatList
  data={this.state.data.slice(0, 1)} // 截取原数组的第一个元素
  keyExtractor={(x, i) => i.toString()}
  renderItem={({ item }) => <Text> {item.id} </Text>}
/>

slice(0,1)会从原数组的起始位置（索引0）截取到索引1（不包含该位置），最终得到一个仅包含第一个元素的新数组，精准满足只渲染第一项的需求。

方法2：在renderItem中判断元素索引 #

如果你不想修改原数据数组，也可以在renderItem回调里通过判断元素的索引来控制渲染逻辑，仅保留索引为0的项：

<FlatList
  data={this.state.data}
  keyExtractor={(x, i) => i.toString()}
  renderItem={({ item, index }) => {
    // 只渲染索引为0的第一个元素
    if (index === 0) {
      return <Text> {item.id} </Text>;
    }
    return null; // 其他项返回null，不渲染任何内容
  }}
/>

不过这种方法的缺陷是FlatList依然会遍历整个数据数组，只是不渲染非第一项的内容，性能上不如第一种方案，更推荐优先使用方法1。

内容的提问来源于stack exchange，提问作者Emily