Вложение компонентов React-Native FlatList и получение обоих элементов - PullRequest
Новая
       23

Вложение компонентов React-Native FlatList и получение обоих элементов

1 голос
/ 13 марта 2020

Я пытаюсь отобразить FlatList элементов, каждый из которых содержит FlatList идентичных кнопок. Когда нажата одна из кнопок, я хочу получить и родительский элемент FlatList, и значение, которому соответствует кнопка.

Я попробовал следующий метод безуспешно (timeItem не определен): 

timeSlotsKeyExtractor = (item, index) => item.toString();

timeSlots =
    [
        '8:00', '10:00', '12:00', '14:00', '16:00', '18:00'
    ];

renderDate = ({ item }) => {
    return (
        <View>
            <Text>{item.date}</Text>
            <FlatList
                data={this.timeSlots}
                keyExtractor={this.timeSlotsKeyExtractor}
                renderItem={({ timeItem }) => (
                    <TouchableOpacity onPress={() => this.addTimeSlot(item, timeItem)}>
                        <View><Text>{timeItem}</Text></View>
                    </TouchableOpacity>
                )}
                horizontal={true} />
        </View>
    )
}

addTimeSlot(item, timeItem) {
    console.log(item)
    console.log(timeItem)
}

Я знаю о SectionLists, и поэтому попытался также сделать каждый элемент моего родителя FlatList объект, содержащий как элемент, так и массив timeSlots, однако я не был уверен, как go получить заголовок в секции renderItem:

Снимок экрана кода SectionList: 

<SectionList
    sections={this.state.weekDates}
    renderSectionHeader={({ section }) => (
        <Text>{section.date} </Text>
    )}
    renderItem={({ item }) => (
        <Text>
            {iten.date}
            {item.timeSlots}
        </Text>
    )}
    keyExtractor={(item, index) => index}
/>

Где я ошибаюсь с этими подходами? Я довольно новичок в React Native, поэтому есть большая вероятность, что я что-то упустил очень простой.

...