Flatlist 不同部分的不同 numColumns

Question

我想渲染一个 React Native Flatlist，其中前两个元素跨越整个屏幕宽度，而所有连续元素跨越屏幕的一半。像这样：

有没有办法用一个 Flatlist 来做到这一点？如果没有，做这样的事情最好的方法是什么？最好没有滚动视图。

Answer 1

您需要先重新设计您的数据结构。然后你可以用视图和定义的宽度来做？

const data = [
{
   fields: 'SingleColumn',
}, 
{
   fields: ['First Column','Second Column']
}

]

const renderItem = ({ item }) => {
    
     return <View>
            { somecondition ? <View>
                   <View style={{ width: '50% }}>
            ...content...
                    </View>
            <View style={{ width: '50%' }}>
             ...second column
            </View> : <View style={{ width: '100%'}}>
                          ..single column content
                      </View>
           </View>
         }
}

Answer 2

你不能在一个 FlatList 中有多个列号，但你可以通过从数据结构中提取前两个元素并使用 [=10= 将它们呈现为 header 来实现你想要的] 属性 在 FlatList 上。然后您可以将数组的其余部分呈现为常规 FlatList。