Рендеринг элементов подряд с помощью плоского списка React Native и закрепленных заголовков - PullRequest
Новая
       47

Рендеринг элементов подряд с помощью плоского списка React Native и закрепленных заголовков

0 голосов
/ 04 декабря 2018

Я использую 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}
/>

Текущий результат Current outcome

Желаемый результат Desired outcome

1 Ответ

0 голосов
/ 04 декабря 2018

Поместите один заголовок и два элемента списка в один элемент, а в методе renderItem используйте этот элемент для визуализации.

...