在React Native中，列表中某些位置的项目如何具有不同的风格？

Question

我试图为列表中的第一项和最后一项设置不同的样式，如下图所示：

第一张卡的右上角为圆角，而最后一张卡的右下角为圆角。我仍在想办法。

有什么方法可以将列表中某个项目的位置传递给该项目本身，以便可以将其应用于其他样式？还是还有其他更好的方法？

另外，如果只有一张卡，我希望该卡的右上角和下角均为圆形，如下所示：

Answer 1

使用ListView / FlatList / SectionList渲染项目时，渲染方法具有index参数。您可以使用该索引来确定该项目是第一个还是最后一个，并为该项目提供条件样式。

例

renderItem = ({item, index}) => {
  if (index === 0) return <ListItem style={styles.firstItem} data={item} />
  else if (index === (this.state.data.length -1)) return <ListItem style={styles.lastItem} data={item} />
  else return <ListItem style={styles.item} data={item} />
}

render() {
  return <FlatList data={this.state.data} renderItem={this.renderItem} />
}