如何在列表视图中呈现多个自定义行 - React Native

Question

我正在使用 ListView 来显示项目列表。到目前为止，我展示的是同类商品，所以没有问题。现在我必须展示不同种类的物品。我如何渲染不同类型的行，比如第 2 行，渲染这个组件，第 5 行渲染那个组件...

默认为行显示 1 个自定义视图，我使用以下代码：

<ListView
                stickySectionHeadersEnabled={false}
                scrollEnabled={!this.state.shouldAnimate}
                style={styles.listView}
                enableEmptySections={true}
                dataSource={this.state.dataSource}
                renderSectionHeader = {this.renderSectionHeader}
                renderRow={(data) => <CellProgram data={data} onPress={this.GetSectionListItem.bind(this, data)} />}
            />

这将为所有行呈现 CellProgram。我应该更改什么以针对特定行显示它并针对其他行显示不同的布局？

Answer 1

你可以根据你的代码写一个if语句或者switch

<ListView
  stickySectionHeadersEnabled={false}
  scrollEnabled={!this.state.shouldAnimate}
  style={styles.listView}
  enableEmptySections={true}
  dataSource={this.state.dataSource}
  renderSectionHeader = {this.renderSectionHeader}
   renderRow={(data,i) => {
    if(i==1){}
    else if (i==2){}
    .......
   }}
/>

别忘了在 if 语句中添加 return

如何在列表视图中呈现多个自定义行 - React Native

How to render multiple custom rows in listview - Reactnative

listview

react-native

listviewitem