React Native中如何在ListView中渲染多种自定义行

这问题我之前也碰到过，ListView处理多类型行其实很简单，主要有两种思路，你可以根据自己的需求来选：

思路1：根据行的位置（固定行）渲染不同组件 #

ListView的renderRow方法其实不止接收data参数，还包含sectionID和rowID（行的索引，从0开始计数）。你可以利用rowID来判断当前是第几行，返回对应的组件：

修改你的renderRow部分代码如下：

<ListView 
  stickySectionHeadersEnabled={false} 
  scrollEnabled={!this.state.shouldAnimate} 
  style={styles.listView} 
  enableEmptySections={true} 
  dataSource={this.state.dataSource} 
  renderSectionHeader={this.renderSectionHeader} 
  renderRow={(data, sectionID, rowID) => {
    // 把rowID转成数字（默认是字符串）
    const rowIndex = parseInt(rowID, 10);
    
    // 第2行（注意：rowIndex从0开始，所以第2行对应index=1）
    if (rowIndex === 1) {
      return <SpecialCellOne data={data} onPress={this.GetSectionListItem.bind(this, data)} />;
    } 
    // 第5行（对应index=4）
    else if (rowIndex === 4) {
      return <SpecialCellTwo data={data} onPress={this.GetSectionListItem.bind(this, data)} />;
    } 
    // 其他行默认渲染CellProgram
    else {
      return <CellProgram data={data} onPress={this.GetSectionListItem.bind(this, data)} />;
    }
  }} 
/>

思路2：根据数据类型动态渲染（更灵活） #

如果你的特殊行不是固定位置，而是根据数据本身的类型来区分，更推荐这种方式：给数据源的每条数据添加一个type字段，标记该数据对应的组件类型，然后在renderRow里根据type判断渲染：

第一步：给数据源添加类型标识 #

比如你的dataSource里的每条数据可以是这样：

// 示例数据
const data = [
  { type: 'program', ...otherData },
  { type: 'special1', ...otherData },
  { type: 'program', ...otherData },
  { type: 'program', ...otherData },
  { type: 'special2', ...otherData },
  // ...更多数据
];

第二步：修改renderRow根据type渲染 #

<ListView 
  stickySectionHeadersEnabled={false} 
  scrollEnabled={!this.state.shouldAnimate} 
  style={styles.listView} 
  enableEmptySections={true} 
  dataSource={this.state.dataSource} 
  renderSectionHeader={this.renderSectionHeader} 
  renderRow={(data) => {
    switch(data.type) {
      case 'special1':
        return <SpecialCellOne data={data} onPress={this.GetSectionListItem.bind(this, data)} />;
      case 'special2':
        return <SpecialCellTwo data={data} onPress={this.GetSectionListItem.bind(this, data)} />;
      // 默认渲染CellProgram
      default:
        return <CellProgram data={data} onPress={this.GetSectionListItem.bind(this, data)} />;
    }
  }} 
/>

注意事项 #

• 确保你的自定义组件（比如SpecialCellOne、SpecialCellTwo）能正确接收data和onPress等props，处理自身的渲染和逻辑。
• 如果使用思路1，要注意rowID是从0开始计数的，别搞混行号和索引的对应关系。
• 如果你后续需要更复杂的列表布局，也可以考虑迁移到FlatList（React Native官方推荐替代ListView的组件），它处理多类型行的方式更直观，不过当前用ListView的话上面两种方法完全够用。

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