用具有不同列数的备用行反应本机FlatList

问题描述

我想拥有一个FlatList，它在奇数行上呈现一个项目，在偶数行上呈现2个项目

i want to have a FlatList which renders a single item on odd rows and 2 items on even rows

是否可以实现此布局.很抱歉，我还没有代码.

Is it possible to achieve this layout.I apologize I do not have code for it up yet.

推荐答案

FlatList有一个renderItem属性，它是一个函数. FlatList绘制的每个项目都会调用该函数.您必须将该函数传递给FlatList.在该函数中，返回要为每个项目绘制的视图.因此，您可以返回要为特定行绘制的任何内容.

FlatList has a renderItem prop which is a function. That function is called for each item which FlatList draws. You have to pass that function to FlatList. In that function, you return the View to be drawn for each item. So you can return whatever you want to draw for a particular row.

renderItem函数将项目的索引作为第二个参数传递.在您的情况下，您可以使用该参数绘制1或两列(或其他可能要绘制的列).

The renderItem function passes the index of the item as the second argument. In your case you can use that argument to draw 1 or two columns (or whatever else you might want to draw).

<FlatList
  data={[{key: 'a', title: 'single column stuff' }, {key: 'b', col1: 'col1 text', col2: 'col2 text'}]}
  renderItem={(item, index) => {
    if(index % 2 === 0) {
      return <View style={{flexDirection: 'row'}}>
        <View style={{flex: 1}}><Text> {item.col1} </Text></View>
        <View style={{flex: 1}}><Text> {item.col2} </Text></View>
      </View>
    } else {
      return <View style={{flex: 1}}><Text> {item.title} </Text></View>
    }
  }}

/>

这篇关于用具有不同列数的备用行反应本机FlatList的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！