React Native -如何在平面列表中获取renderItem的度量

nqwrtyyt 于 2023-01-27 发布在 React

关注(0)|答案(1)|浏览(118)

我有一个水平的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>
    );
}

react-native

来源：https://stackoverflow.com/questions/70474279/react-native-how-to-get-the-measures-of-renderitem-in-flatlist

1条答案

按热度按时间

ulydmbyx1#

我不知道你的主要目标是什么，但假设你希望所有的项目都是相同的高度（由高度最大的项目给定），你可以使用onLayout来获得最大的值。

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

您也可以尝试在FlatList上使用itemHeight，看看效果如何。

赞(0）回复(0）举报 2023-01-27

我来回答

React Native -如何在平面列表中获取renderItem的度量

1条答案

相关问题

热门标签

最新问答