Flatlist 不同部分的不同 numColumns答案

【问题标题】：Different numColumns for different parts of FlatlistFlatlist 不同部分的不同 numColumns
【发布时间】：2021-03-29 21:09:56
【问题描述】：

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

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

【问题讨论】：

标签： react-native react-native-android react-native-ios react-native-flatlist

【解决方案1】：

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

【讨论】：

哇，我不知道我是怎么错过的。老实说，不知道有一个 ListHeader 组件。太棒了，谢谢！

【解决方案2】：

您需要首先重新设计您的数据结构。那你可以用 View 和定义的宽度来做吗？

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

【讨论】：

这可以直观地工作，但会失去在大型数据集上使用 FlatList 的性能优势
@Nabil Freeman 同意。粗略地说，什么对你来说会被视为一个大型数据集？你有这方面的经验吗？