React Native - Как получить размеры renderItem в Flatlist
У меня есть горизонтальный Flatlist, где элементы могут быть разной высоты. Как я могу получить высоту всех элементов или определенного видимого элемента и, в зависимости от высоты элемента, изменить высоту Flatlist?
Я сделал код, близкий к моему, на Snack. В примере высота в data указана для примера, в моем коде я НЕ ЗНАЮ эту высоту.
Буду очень признателен за помощь!
import React from 'react';
import { View, StyleSheet, FlatList, Text, Dimensions } from 'react-native';
const {width} = Dimensions.get('window');
const Item = ({item}) => {
return (
<View style={{width, height: item.height, backgroundColor: 'yellow'}}>
<Text>{item.type}</Text>
<Text>{item.text}</Text>
</View>
);
};
export default function App() {
const data = [
{
height: 100, //FOR EXAMPLE
type: 'row 1',
text: 'row 1'
},
{
height: 200, //FOR EXAMPLE
type: 'row 2',
text: 'row 2'
},
{
height: 150, //FOR EXAMPLE
type: 'row 3',
text: 'row 3'
},
];
return (
<View>
<FlatList
style={{backgroundColor: 'red'}}
data={data}
keyExtractor={item => item.id}
renderItem={({item}) => (
<Item item={item} />
)
}
horizontal
pagingEnabled
/>
</View>
);
}