时间戳

首页 > 解决方案 > 如何从 FlatList 中获取 renderItem 的高度？

reactjs - 如何从 FlatList 中获取 renderItem 的高度？

问题描述

我的目标是获取组件的函数<View></View>使用的高度，并将其用于内部的组件renderItem<FlatList /><Image />renderItem

const renderItem = () => {
  let height;

  return
    <View onLayout={event => {height = event.nativeElement.layout.height}}>
      <Image style={{width: height}]/> // I wish to use it like this.
    </View>
}

高度确实发生了变化，但不幸的是，它不会重新渲染。我也尝试将re-render模式与 一起使用React.useState()，不幸的是，renderItem函数不是 React 函数。

标签： reactjsreact-native

解决方案

您可以使用本地状态来存储该height值。由于提到renderItem的不是反应函数，只需将heightstate 值及其 setter 函数作为来自 Parent 组件的 props传递renderItem()。所以当这个height状态值改变时，它会重新渲染组件。

const renderItem = (height,setHeight) => {
  return
    <View onLayout={event => setHeight(event.nativeElement.layout.height)}>
      <Image style={{width: height}}/>
    </View>
}

并从renderItem调用的父组件

const ParentComponent = () => {
 const [height,setHeight] = useState();
 ...
 ...
 renderItem(height,setHeight)
}

推荐阅读