React Native SectionList with columns

Question

我试图得到一个部分列表显示有多列。因为section list有这个功能，所以我认为为每个section item渲染一个平面列表可能是个好主意。但我不让它工作。

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { FlatList } from "react-native";
import { SectionList } from "react-native";


class Account extends Component {

data2 =
[
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
data3 =
[
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28adfba',
title: '22--First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91adafa97f63',
title: '22--Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571efadfee29d72',
title: '22--Third Item',
},
];
data4 = ['a', 'b', 'c']
data = [
{sectionTitle: 'test-title-alpha', data: [this.data2]},
{sectionTitle: 'test-title-beta', data: [this.data3]},
];

_renderItem = ({item}) => {
console.log('render-item', item);
return (
<Text>item: {item}</Text>
)
}
_renderSectionHeader = ({item}) => {
console.log('section-header', item);
return (
<Text>section header: {item}</Text>
)
}
_renderSectionListItem = ({item}) => {
console.log('section-list-item', item);
return (
<FlatList
data={item}
numColumns={3}
renderItem={this._renderItem}
//keyExtractor={item => item.id}
/>
)
}
render () {
console.log('render', this.data);
console.log(this.data[0].sectionTitle);
return (
<SectionList
sections={this.data}
renderSectionHeader={this._renderSectionHeader}
renderItem={this._renderSectionListItem}
//keyExtractor={item => item.id}
/>
)
}
}
export default Account;

使用data4似乎可以继续，使用data2或data3似乎不能。

有人看到我的失败了吗?最终输出应该接近:

first-section-title
item1.id                    item2.id                    item3.id
item1.title                 item2.title                 item3.title
item1.whatever              item2.whatever              item3.whatever  
second-section-title
item4.id                    item5.id                    item6.id
item4.title                 item5.title                 item6.title
item4.whatever              item5.whatever              item6.whatever  
...

(网格视图，每行x项)

从源代码

data = [
{
sectionTitle: 'first-section-title',
data: [
[
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d43',
title: 'and so on',
},
]
]
},
{
sectionTitle: 'second-section-title',
data: [
[
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: '5 Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: '6 Item',
},
]
]
},
];

Answer 1

工作示例(如果其他人需要的话)

import React, { Component } from 'react';
import { Text, View, FlatList, SectionList } from "react-native"
const sections = [
{
title: "Vegetables",
key: "vegetables",
data: [
{
list: [
{
name: "Carrot",
color: "Orange",
},
{
name: "Cabbage",
color: "Purple",
},
],
},
],
},
{
title: "Fruits",
key: "fruits",
data: [
{
list: [
{
name: "Apple",
color: "Green",
},
{
name: "Banana",
color: "Yellow",
},
{
name: "Strawberry",
color: "Red",
},
{
name: "Blueberry",
color: "Blue",
},
],
},
],
},
]
class Account extends Component {
renderSection = ({ item }) => {
return (
<FlatList
data={item.list}
numColumns={2}
renderItem={this.renderListItem}
keyExtractor={this.keyExtractor}
/>
)
}
renderSectionHeader = ({ section }) => {
return <Text>{section.title}</Text>
}
renderListItem = ({ item }) => {
return (
<View style={{height: 50, width: 100, borderColor: "green", borderWidth: 1 }}>
<Text>{item.name}</Text>
<Text>{item.color}</Text>
</View>
)
}
keyExtractor = (item) => {
return item.name
}
render () {
return (
<SectionList
sections={sections}
renderSectionHeader={this.renderSectionHeader}
renderItem={this.renderSection}
/>
)
}
}
export default Account;