React native:如何进行水平滚动但数据分为 4 行
React native: How to make horizontal scroll but data is divided to 4 rows
我需要水平滚动我的项目,但我的 数据被分成 4 行,每行包含 4 个项目。 我可以水平滚动,这样接下来的 16 个项目就会出现在屏幕上.
当使用 numColumns={4} 时如果
horizontal={false}
但
horizontal={true}
我无法指定 numColumns 属性。
我应该使用 SectionList 而不是 FlatList 吗?
如何实施?
let items = [
{ id: 1, title: '1', price: '20' },
{ id: 2, title: '2', price: '16' },
{ id: 3, title: '3', price: '92' },
{ id: 4, title: '4', price: '93' },
{ id: 5, title: '5', price: '20' },
{ id: 6, title: '6', price: '16' },
{ id: 7, title: '7', price: '92' },
{ id: 8, title: '8', price: '93' },
{ id: 9, title: 'Grilled Steak', price: '20' },
{ id: 10, title: 'Pappas', price: '16' },
{ id: 11, title: 'Ciccione', price: '92' },
{ id: 12, title: 'Gyros Melt', price: '93' },
{ id: 13, title: 'Grilled Steak', price: '20' },
{ id: 14, title: 'Pappas', price: '16' },
{ id: 15, title: 'Ciccione', price: '92' },
{ id: 16, title: 'Gyros Melt', price: '93' },
];
<FlatList
keyExtractor={item => item.id}
data={items}
horizontal
numColumns={4}
renderItem={({ item }) => <Text>{item.title}</Text>}
/>
不幸的是,FlatList 在水平时不支持多列。
https://facebook.github.io/react-native/docs/flatlist#numcolumns
Multiple columns can only be rendered with horizontal={false} and will
zig-zag like a flexWrap layout. Items should all be the same height -
masonry layouts are not supported.
但是,您可以对数据进行分组,以便为水平 FlatList 中的每个单元格呈现 4 个项目。
let items = [
[ { id: 1, title: '1', price: '20' },
{ id: 2, title: '2', price: '16' },
{ id: 3, title: '3', price: '92' },
{ id: 4, title: '4', price: '93' } ],
[ { id: 5, title: '5', price: '20' },
{ id: 6, title: '6', price: '16' },
{ id: 7, title: '7', price: '92' },
{ id: 8, title: '8', price: '93' } ],
[ { id: 9, title: 'Grilled Steak', price: '20' },
{ id: 10, title: 'Pappas', price: '16' },
{ id: 11, title: 'Ciccione', price: '92' },
{ id: 12, title: 'Gyros Melt', price: '93' } ],
[ { id: 13, title: 'Grilled Steak', price: '20' },
{ id: 14, title: 'Pappas', price: '16' },
{ id: 15, title: 'Ciccione', price: '92' },
{ id: 16, title: 'Gyros Melt', price: '93' } ]
];
然后更新您的 renderItem 以便它处理增加的输入,就像这样。
renderItem = ({item}) => {
return item.map(i => <Text>{i.title}</Text>)
}
我对相同的场景有同样的问题。如果您的数组很长,则制作组数据是一种非常糟糕的做法。所以我尝试了 flatlist 的风格并且我成功了。如果您可以利用它,以下是我的代码:
<ScrollView showsHorizontalScrollIndicator={false} horizontal={true} style={styles.flatListContainer}>
<FlatList
showsHorizontalScrollIndicator={false}
data={item.items}
numColumns={4}
renderItem={_showData}
columnWrapperStyle={styles.flatListColumnWraper}
keyExtractor={(item) => item.key}
style={styles.flatListDataContainer}
scrollEnabled={false}
contentContainerStyle={
styles.flatListContentContainerStyle
}
/>
</ScrollView>
flatListContainer: {
marginTop: height(2),
height:height(60),
paddingVertical:height(2)
},
flatListDataContainer: {
alignSelf: 'center',
},
flatListContentContainerStyle: {
alignSelf: 'center',
flexDirection: 'row',
justifyContent: 'space-evenly',
},
flatListColumnWraper:{
flexDirection: 'column',
},
我需要水平滚动我的项目,但我的 数据被分成 4 行,每行包含 4 个项目。 我可以水平滚动,这样接下来的 16 个项目就会出现在屏幕上.
当使用 numColumns={4} 时如果
horizontal={false}
但
horizontal={true}
我无法指定 numColumns 属性。
我应该使用 SectionList 而不是 FlatList 吗?
如何实施?
let items = [
{ id: 1, title: '1', price: '20' },
{ id: 2, title: '2', price: '16' },
{ id: 3, title: '3', price: '92' },
{ id: 4, title: '4', price: '93' },
{ id: 5, title: '5', price: '20' },
{ id: 6, title: '6', price: '16' },
{ id: 7, title: '7', price: '92' },
{ id: 8, title: '8', price: '93' },
{ id: 9, title: 'Grilled Steak', price: '20' },
{ id: 10, title: 'Pappas', price: '16' },
{ id: 11, title: 'Ciccione', price: '92' },
{ id: 12, title: 'Gyros Melt', price: '93' },
{ id: 13, title: 'Grilled Steak', price: '20' },
{ id: 14, title: 'Pappas', price: '16' },
{ id: 15, title: 'Ciccione', price: '92' },
{ id: 16, title: 'Gyros Melt', price: '93' },
];
<FlatList
keyExtractor={item => item.id}
data={items}
horizontal
numColumns={4}
renderItem={({ item }) => <Text>{item.title}</Text>}
/>
不幸的是,FlatList 在水平时不支持多列。
https://facebook.github.io/react-native/docs/flatlist#numcolumns
Multiple columns can only be rendered with horizontal={false} and will zig-zag like a flexWrap layout. Items should all be the same height - masonry layouts are not supported.
但是,您可以对数据进行分组,以便为水平 FlatList 中的每个单元格呈现 4 个项目。
let items = [
[ { id: 1, title: '1', price: '20' },
{ id: 2, title: '2', price: '16' },
{ id: 3, title: '3', price: '92' },
{ id: 4, title: '4', price: '93' } ],
[ { id: 5, title: '5', price: '20' },
{ id: 6, title: '6', price: '16' },
{ id: 7, title: '7', price: '92' },
{ id: 8, title: '8', price: '93' } ],
[ { id: 9, title: 'Grilled Steak', price: '20' },
{ id: 10, title: 'Pappas', price: '16' },
{ id: 11, title: 'Ciccione', price: '92' },
{ id: 12, title: 'Gyros Melt', price: '93' } ],
[ { id: 13, title: 'Grilled Steak', price: '20' },
{ id: 14, title: 'Pappas', price: '16' },
{ id: 15, title: 'Ciccione', price: '92' },
{ id: 16, title: 'Gyros Melt', price: '93' } ]
];
然后更新您的 renderItem 以便它处理增加的输入,就像这样。
renderItem = ({item}) => {
return item.map(i => <Text>{i.title}</Text>)
}
我对相同的场景有同样的问题。如果您的数组很长,则制作组数据是一种非常糟糕的做法。所以我尝试了 flatlist 的风格并且我成功了。如果您可以利用它,以下是我的代码:
<ScrollView showsHorizontalScrollIndicator={false} horizontal={true} style={styles.flatListContainer}>
<FlatList
showsHorizontalScrollIndicator={false}
data={item.items}
numColumns={4}
renderItem={_showData}
columnWrapperStyle={styles.flatListColumnWraper}
keyExtractor={(item) => item.key}
style={styles.flatListDataContainer}
scrollEnabled={false}
contentContainerStyle={
styles.flatListContentContainerStyle
}
/>
</ScrollView>
flatListContainer: {
marginTop: height(2),
height:height(60),
paddingVertical:height(2)
},
flatListDataContainer: {
alignSelf: 'center',
},
flatListContentContainerStyle: {
alignSelf: 'center',
flexDirection: 'row',
justifyContent: 'space-evenly',
},
flatListColumnWraper:{
flexDirection: 'column',
},