React Native 中如何使用 FlatList 渲染异构数据

核心思路是通过数据标记区分不同内容类型，让FlatList根据类型渲染对应UI，有两种常用实现方式：

方案1：合并数据源+类型标记（适合多类异构列表混合的场景） #

步骤1：处理原始数据，添加类型标识 #

将用户信息作为独立项加入数据源，给所有项增加type字段区分内容类型：

// 原始数据
const transactionData = [{amount: 200, date: '2020-08-02', desc: '账单'}, {amount: 200, date: '2020-08-02', desc: '账单'}]
const userData = {name: 'John Doe', gender: '男'}

// 合并为统一渲染数据源
const mergedListData = [
  // 用户信息项，标记类型为user
  {
    type: 'user',
    payload: userData
  },
  // 交易列表项，统一标记类型为transaction
  ...transactionData.map(tranItem => ({
    type: 'transaction',
    payload: tranItem
  }))
]

步骤2：在renderItem中按类型渲染不同组件 #

FlatList的渲染回调中判断项的类型，返回对应的UI即可：

import { FlatList, Text, View } from 'react-native';

// 渲染用户信息卡片
const UserCard = ({userInfo}) => {
  return (
    <View style={{padding: 16, borderBottomWidth: 1, borderBottomColor: '#f0f0f0'}}>
      <Text style={{fontSize: 18, fontWeight: 'bold'}}>用户名：{userInfo.name}</Text>
      <Text style={{fontSize: 14, color: '#666', marginTop: 4}}>性别：{userInfo.gender}</Text>
    </View>
  )
}

// 渲染交易记录项
const TransactionItem = ({tranInfo}) => {
  return (
    <View style={{padding: 12, marginHorizontal: 16, marginVertical: 6, backgroundColor: '#f9f9f9', borderRadius: 8}}>
      <Text>金额：¥{tranInfo.amount}</Text>
      <Text style={{fontSize: 12, color: '#999', marginTop: 2}}>日期：{tranInfo.date}</Text>
      <Text style={{fontSize: 12, color: '#999'}}>备注：{tranInfo.desc}</Text>
    </View>
  )
}

// 页面使用FlatList
const TransactionPage = () => {
  return (
    <FlatList
      data={mergedListData}
      renderItem={({item}) => {
        switch(item.type) {
          case 'user':
            return <UserCard userInfo={item.payload} />
          case 'transaction':
            return <TransactionItem tranInfo={item.payload} />
          default:
            return null
        }
      }}
      keyExtractor={(item, index) => `${item.type}_${index}`}
    />
  )
}

方案2：使用ListHeaderComponent（适合单块非列表数据作为头部的场景） #

如果用户信息只需要固定在列表最顶部作为头部展示，可以直接用FlatList内置的头部属性，不需要修改交易数据源，实现更简单：

const TransactionPage = () => {
  return (
    <FlatList
      data={transactionData}
      // 直接传入用户信息组件作为头部
      ListHeaderComponent={<UserCard userInfo={userData} />}
      renderItem={({item}) => <TransactionItem tranInfo={item} />}
      keyExtractor={(item, index) => `tran_${index}`}
    />
  )
}

性能优化建议 #

如果两类内容的高度差异较大，可以配置getItemLayout属性提前计算项的高度，减少滚动时的重新布局开销，提升流畅度。

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