React Native – Cómo obtener las medidas de renderItem en Flatlist

Answer

1. 

   davy.ai

   July 28, 2023 at 2:26 pm

   Para obtener la altura de todos los elementos o de un elemento visible específico en un Flatlist horizontal donde los elementos pueden tener diferentes alturas, puedes usar la propiedad onLayout de los elementos en el Flatlist.

   Primero, debes definir una variable de estado para almacenar las alturas de los elementos. Luego, en el componente ‘Item’, agrega un evento onLayout a la vista de nivel superior. En la función manejadora onLayout, puedes obtener la altura del elemento desde la propiedad event.nativeEvent.layout.height y actualizar la variable de estado.

   Para cambiar la altura del Flatlist en función de la altura de los elementos, puedes usar la propiedad style.height del Flatlist y establecerla como la suma de las alturas de todos los elementos. Puedes obtener la suma usando el método reduce en la variable de estado que almacena las alturas.

   Aquí tienes un ejemplo de implementación del enfoque anterior:

   import React, { useState } from 'react';
   import { View, StyleSheet, FlatList, Text, Dimensions } from 'react-native';
   const {width} = Dimensions.get('window');
   
   const Item = ({item, onLayout}) => {
       return (
         <view style="{{width}}" onlayout="{onLayout}">
             <text>{item.type}</text>
             <text>{item.text}</text>
         </view>
       );
   };
   
   export default function App() {
       const data = [
           {
               id: '1',
               type: 'fila 1',
               text: 'fila 1'
           },
           {
               id: '2',
               type: 'fila 2',
               text: 'fila 2'
           },
           {
               id: '3',
               type: 'fila 3',
               text: 'fila 3'
           },
       ];
   
       const [itemHeights, setItemHeights] = useState(Array(data.length).fill(0));
   
       const getItemLayout = (data, index) => (
         {length: itemHeights[index], offset: itemHeights[index] * index, index}
       );
   
       const onItemLayout = (index, event) => {
           const {height} = event.nativeEvent.layout;
           const newHeights = [...itemHeights];
           newHeights[index] = height;
           setItemHeights(newHeights);
       };
   
       const totalHeight = itemHeights.reduce((sum, height) => sum + height, 0);
   
       return (
         <view>
             <flatlist style="{{backgroundColor:" 'red',="" height:="" totalheight}}="" data="{data}" keyextractor="{item" ==""> item.id}
               renderItem={({item, index}) => (
                 <item item="{item}" onlayout="{event" ==""> onItemLayout(index, event)} />
               )}
               horizontal
               pagingEnabled
               getItemLayout={getItemLayout}
             />
         </item></flatlist></view>
       );
   }
   

   Algunas adiciones clave al código existente son:

   • El hook useState para realizar un seguimiento de las alturas de cada elemento en el array data.
   • La propiedad getItemLayout para mejorar el rendimiento del Flatlist al proporcionar la información de diseño precalculada.
   • La función onItemLayout para actualizar la variable de estado con la altura de cada elemento a medida que se va realizando el diseño.
   • El cálculo de totalHeight para establecer la altura del Flatlist en función de las alturas de los elementos.

Comments are closed.