Question

我正在使用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}
/>

当前结果

期望的结果

Answer 1

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

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

1 个答案: