flatlist具有numColumns支持。如何使用sectionList设置numColumns？
github问题：SectionList RenderItem多项项目支持＃13192
这是我对numColumns的解决方案。如果您最好让我知道。
class Example extends Component {
static propTypes = {
numColumns: PropTypes.number
};
static defaultProps = {
numColumns: 2
};
_renderSection = data => <Section {...data} />;
_renderItem = ({ section, index }) => {
const { numColumns } = this.props;
if (index % numColumns !== 0) return null;
const items = [];
for (let i = index; i < index + numColumns; i++) {
if (i >= section.data.length) {
break;
}
items.push(<Item item={section.data[i]} />);
}
return (
<View
style={{
flexDirection: "row",
justifyContent: "space-between"
}}
>
{items}
</View>
);
};
render() {
return (
<SectionList
sections={dumyData}
style={styles.container}
renderItem={this._renderItem}
renderSectionHeader={this._renderSection}
/>
);
}
}
可以将flatlist与numcolumns prop一起用作sectionList的renderitem。
const data = [ //Notice [[...]] instead of [...] as in the RN docs
{data: [[...]], title: ...},
{data: [[...]], title: ...},
{data: [[...]], title: ...},
]
render () {
return (
<SectionList
renderItem={this._renderSectionListItem}
renderSectionHeader={this._renderSectionHeader}
sections={data}
/>
)
}
renderSectionListItem = ({item}) => {
return (
<FlatList
data={item}
numColumns={3}
renderItem={this.renderItem}
/>
)
}
将这个问题挖掘出来，我带来了类似于Pir Shukarullah Shah的解决方案。
我使用的是flatlist而不是常规项目，仅考虑<SectionList/>'s renderItem方法中的第一项。
_renderList = ({ section, index }) => {
if (index !== 0) return null;
return (
<FlatList numColumns={columns}
columnWrapperStyle={styles.container}
data={section.data}
renderItem={this._renderItem}
keyExtractor={keyExtractor}
/>
)
}
...
<SectionList
renderItem={this._renderList}
renderSectionHeader={this._renderSectionHeader}
sections={itemList}
keyExtractor={keyExtractor}
/>
我发现有一个简单的解决方案。请尝试将以下属性添加到
contentContainerStyle={{
flexDirection : 'row',
justifyContent : 'flex-start',
alignItems : 'flex-start',
flexWrap : 'wrap'
}}
此外，设置并渲染截面标题，其宽度等于截面清单宽度。否则，列表项将在"行"标题下方以行向沿行向显示。
const DATA = [
{
renderItem: ({ item, index }) => {
return (<View style={{flexDirection:'row', alignItems:'center', justifyContent:'space-between', }}>
{item.map((elem,index)=>(<View style={{ borderColor: 'black', borderWidth: 2, minWidth:100 }}>
<Text>{elem.value}</Text>
</View>))
}
</View>);
},
data: [
[{id:'1', value:'Pizza'}, {id:'2', value:'Burger'}, {id:'3', value:'Onion Rings'}], //this array length will be noOfColumns
[{id:'4', value:'Risotto'}, {id:'5', value:'French Fries'}, {id:'6', value:'Water'}],
],
},
<SectionList
ref={listRef}
sections={DATA}
keyExtractor={_keyExtractor}
/>
我具有与Pir Shukarullah Shah一样的逻辑。React不建议使用FlexWrap的想法，并警告在FlatList中使用NumColumns Prop。如果有人有更好的解决方案，请添加。
let items = []
const renderItem = ({ item, index }) => {
if (index % 2 === 0) {
items = []
items.push(<Card cloth={item} index={index} />)
return (index === clothes[0].data.length - 1) ? <View style={styles.row}>{items}</View> : null
}
items.push(<Card cloth={item} index={index} />)
return (
<View style={styles.row}>
{items}
</View>
)
}
部分列表是：
<SectionList
sections={clothes}
renderItem={renderItem}
keyExtractor={(item, index) => index}
renderSectionHeader={renderSectionHeader}
stickyHeaderHiddenOnScroll={true}
stickySectionHeadersEnabled={true}
onEndReached={endReachedHandler}
onEndReachedThreshold={0.25}
contentContainerStyle={{ paddingBottom: '25%' }}
/>
衣服的结构是：
let one = {name: 'Jeans pant'}
let many = Array(10).fill(one) // creating more dummy clothes
let cl = [{data: many, title: 'Cloth'}]
let [clothes, setClothes] = useState(cl)
我只需要一个部分，所以在Cl数组中，如果您想拥有多个部分，则只需添加到衣服数组中。
这是Pir Shukarullah Shah接受答案的略有更新的版本，以在类方法上显示更有功能的方法。
// render a single section.data item
const itemRenderer = (item) => <Text>{item}</Text>
return (
<SectionList
sections={listData}
renderItem={(section, index) => {
if (index % numCols) { // items are already consumed
return null
}
// grab all items for the row
const rowItems = section.data.slice(index, index+numCols)
// wrap selected items in a "row" View
return <View
style={{
flexDirection:"row",
justifiyContent:"space-between"
}}
>{rowItems.map(itemRenderer)}</View>
}}
/>)
另外
const itemFixedWidth = 24
const listWidth = useWindowDimensions().width
const numCols = Math.floor(listWidth / itemFixedWidth)
我是该站点的新用户，否则我只是在上面添加Vong的答案。光滑，那个。
只是为了进一步澄清他写的最后一句话。
我使用了dimensions.get（'window'）。截面标题上的宽度如下：
renderSectionHeader={({ section: { title } }) => (
<View
style={{
width: Dimensions.get('window').width,
}}
>
<Text>
{title}
</Text>
</View>
)}
尽管该方法确实发出了有关使用FlexWrap的控制台警告...
也许这可以帮助
const renderItemList: SectionListRenderItem<TicketTypes> = ({
index,
section,
}) => {
if (index % 2 !== 0) {
return null;
}
const item = section.data[index];
const nextItem = section.data[index + 1];
return (
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
padding: 10,
}}>
<CardTicket data={item} />
{nextItem ? <CardTicket data={nextItem} /> : <View style={{flex: 1}} />}
</View>
);
};
return (
<Container>
<SectionList
sections={MockTickets}
keyExtractor={({id}) => id}
renderItem={renderItemList}
renderSectionHeader={({section: {category}}) => (
<Text style={{backgroundColor: 'gray', paddingVertical: 10}}>
{category}
</Text>
)}
/>
</Container>
);