如何在平面列表中呈现不同的数据

Question

我有风格各异的组件，并希望将每个组件呈现为特定数据。我希望组件中的第一个元素与数组中的第一个元素一起呈现：

<View>
    <Text style={{backgroundColor:'red'}}>1</Text>
    <Text style={{backgroundColor:'green'}}>1</Text>
    <Text style={{backgroundColor:'yellow'}}>1</Text>
</View>

const data=[1,2,3,4,5,6,7,8]

renderItem=(item)=>{
    <my-component {item} />
}

<FlatList 
    data={data}
    renderItem={this.renderItem}
/>

我希望数组中的第一个元素采用组件中的第一个元素。