我试图做这样的事情:
问题:该项目是使用immutablejs
和according to React Native Docs构建的,我无法使用FlatList
,因此我无法使用该组件的numColumns道具功能。
AFAIK,我唯一的选择是使用VirtualizedList作为文档指出,但我无法弄清楚如何将单元格显示为如上所示的网格。
我已经尝试在单元格和视图包装器中添加style
道具,但是没有用于对齐单元格的代码(如我发布的图片)被忽略。事实上,当我使用ScrollView
时,它显示完美,但由于巨大的延迟,我将代码移至VirtualizedList
。
有任何帮助吗?任何事情都会受到欢迎,我已经在谷歌上挖掘了很多,但我找不到任何这个。
一些示例代码:
<View>
<VirtualizedList
data={props.schedules}
getItem={(data, index) => data.get(index)}
getItemCount={(data) => data.size}
keyExtractor={(item, index) => index.toString()}
CellRendererComponent={({children, item}) => {
return (
<View style={{any flexbox code gets ignored here}}>
{children}
</View>
)}}
renderItem={({ item, index }) => (
<Text style={{also here}} key={index}>{item.get('schedule')}</Text>
)}
/>
</View>
答案 0 :(得分:1)
回答我自己的问题:
我通过从react-native
repo复制FlatList.js源代码来实现它。
这是一个示例代码:
<VirtualizedList
data={props.schedules}
getItem={(data, index) => {
let items = []
for (let i = 0; i < 4; i++) {
const item = data.get(index * 4 + i)
item && items.push(item)
}
return items
}}
getItemCount={(data) => data.size}
keyExtractor={(item, index) => index.toString()}
renderItem={({item, index}) => {
return (
<View key={index} style={{flexDirection: 'row'}}>
{item.map((elem, i) => (
<View key={i}>
<Text key={i}>{elem.get('horario')}</Text>
</View>
))}
</View>
)
}}
/>
数字4
用于列数。关键部分位于getItem
,并在flexDirection: 'row'
组件renderItem
处添加View
。