React Nativeのリストの特定の場所にあるアイテムのスタイルを変える方法は？

Question

私は下の写真のように、リスト内の最初と最後の項目ごとに異なるスタイルを持ってしようとしています：最初のカードは、右上の角を丸めたし、最後のカードを持っている

右下の丸い角。私はまだこれにアプローチする方法を考え出しています。

リスト内のアイテムの位置をアイテム自体に渡して、別のスタイルに適用できる方法はありますか？それとも他のより良いアプローチがありますか？

また、私は以下のように、一つだけのカード存在があるかどう丸みを帯びた上部および下部右の角の両方を持っているカードを持っているしたいと思います：

Answer 1

のListView/FlatList/SectionListを持つアイテムをrendereingときレンダリングメソッドにはインデックスパラメータがあります。このインデックスを使用して、アイテムが最初か最後かを判断し、そのアイテムの条件付スタイリングを行うことができます。

例

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} /> 
}