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

Question

I'm using React Native Flat List to render out a list with sticky headers. 我正在使用React Native Flat List渲染出带有粘性标题的列表。 It seems like the sticky headers and the list items all live in the same container, thus preventing me from adding flexDirection: 'row' to the list items only. 似乎粘性标头和列表项都位于同一容器中，因此阻止了我将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}
/>

Current outcome 目前的结果

Desired outcome 期望的结果

Answer 1

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

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

问题描述

1 个解决方案

解决方案1
0 2018-12-04 06:56:32

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

问题描述

1 个解决方案

解决方案1 0 2018-12-04 06:56:32

解决方案1
0 2018-12-04 06:56:32