使用 React Native 平面列表和粘性标题在行中渲染项目答案

【问题标题】：Rendering items in row with React Native flat list and sticky headers使用 React Native 平面列表和粘性标题在行中渲染项目
【发布时间】：2018-12-04 06:06:35
【问题描述】：

我正在使用 React Native Flat List 来呈现带有粘性标题的列表。似乎粘性标题和列表项都位于同一个容器中，因此我无法将 flexDirection: 'row' 仅添加到列表项中。

renderItem = ({ item }) => {
    if (item.header) {
        return (
            <ListItem itemDivider style={{backgroundColor: '#87cefa'}}>
                <Body>
                    <Text style={{ fontWeight: "bold"}}>
                        {item.name}
                    </Text>
                </Body>
            </ListItem>
        );
    } else if (!item.header) {
        return (
            <ListItem style={styles.fridgeItemContainer}>
                <Card style={styles.fridgeItem}>
                    <Icon name='md-pizza' style={{fontSize: 60, color: 'red'}} />
                    <Text>{item.name}</Text>
                </Card>
            </ListItem>
        );
    }
};

<FlatList
    data={this.state.data}
    renderItem={this.renderItem}
    keyExtractor={item => item.id}
    stickyHeaderIndices={this.state.stickyHeaderIndices}
    numColumns={1}
/>

目前的结果

期望的结果

【问题讨论】：

标签： javascript react-native expo react-native-flatlist

【解决方案1】：

将一个标题和两个列表项放在一个元素中，并在 renderItem 方法中使用该单个项目进行渲染。

【讨论】：

感谢回复，介意举个例子吗？
我不能举一个很好的例子，因为我不知道你的数据，但我会试着解释一下。在您的 renderItem 方法中，而不是 if 表达式返回一个标题和两个列表项。为此创建一个布局并返回。为此，您可能需要对数据进行一些更改。
这行不通。 RenderItems() 循环遍历一组数据，一次将一个项目传递给 renderItem()。数据格式如下：data: [{header:true, name:'someName'}, {header:false, name:'someName'}]
如果你有一个标题和其中的一些项目意味着你有一些数据组（至少我是这样理解的）所以你可以像这样对你的数据进行分组。 [{"header" : "Header1","items": [{"name":"name1"},{"name" : "name2"}]},{"header":"Header2","items": [{"name":"name3"},{"name" : "name4"}]}]