React Native - 如何在 Flatlist 中获取 renderItem 的度量

Question

I have a horizontal Flatlist where items can be of different heights. How can I get the height of all elements or a specific visible element and, depending on the element's height, change the height of the Flatlist ?

I made a code close to mine on Snack . In the example, the height in data is indicated for the example, in my code I DON'T KNOW this height .

I would be very grateful for your help!

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>
  );
}

Answer 1

I'm not sure what is your main goal here but assuming that you what all items to be the same height (given by the item with the biggest height), you can use onLayout to get the highest value. Something like this:

const Item = ({ item, height, setHeight }) => {
  return (
    <View
      style={{ width, height: height, backgroundColor: 'yellow' }}
      onLayout={({ layout }) => (onLayout.height > height ? setHeight(layout.height) : false)} // If current item height is bigger then the rest, update height for all of them
    >
      <Text>{item.type}</Text>
      <Text>{item.text}</Text>
    </View>
  )
}

export default function App() {
  const [itemHeight, setItemHeight] = useState(0) // Keep track of height
  // ... data

  return (
    <View>
      <FlatList
        style={{ backgroundColor: 'red' }}
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Item item={item} height={itemHeight} setHeight={setItemHeight} />
        )}
        horizontal
        pagingEnabled
      />
    </View>
  )
}

you can try to use itemHeight on the FlatList as well and see how that plays out.