使用React Native平面列表和粘性標題在行中渲染項目

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 個解決方案

解決方案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