当 FlatList 项目进入 View 时触发函数答案

【问题标题】：Function fires when a FlatList item comes to View当 FlatList 项目进入 View 时触发函数
【发布时间】：2019-09-06 10:30:20
【问题描述】：

我有一个基本的平面列表如下。

  <FlatList
    numColumns={2}
    data={items}
    renderItem={() => (
      <Item />
    )
    }
  />

我正在尝试根据前四个项目是否在视图中来隐藏/显示另一个组件。

为此，我必须首先确定某个元素是否在视图中。我该如何解决这个问题？

【问题讨论】：

当您滚动离开前四个项目（它们已渲染但不再显示）时，您希望发生什么？
当前四个元素在屏幕上不可见时，我实际上想通过一个函数触发一些更改。
好的，我首先在componentDidMount、componentDidUnmount 和render 中放入一个console.log() 到<Item/> 中，以确定您的项目是否在滚动时卸载。我还将 Flatlist 属性 initialNumToRender 设置为 0。希望它确实卸载了。
你也可以传入item index facebook.github.io/react-native/docs/flatlist.html#renderitem

标签： react-native react-native-android react-native-ios react-native-flatlist

【解决方案1】：

如果您将 Flatlist 属性 initialNumToRender 设置为 0，并检查您的项目是否在滚动离开时卸载，您可以轻松编写 componentDidMount 和 componentDidUnmount，如果 flatlist item index 小于 4 则触发.

如果这不起作用，我会尝试编写一个包装器组件来跟踪第四个组件的位置。

无论你的容器组件呈现什么

render() {
  return (
    <>
      <Flatlist 
        initialNumToRender={4}
        renderItem={({ index }) => (
          <>
            {index === 4 ? (     
              <PositionAwareView 
                setFourItemsInView={this.setFourItemsInView}
                id={index}
              >
                <Item 
                  setFourItemsInView={this.setFourItemsInView}
                  index={index}
                />
              <PositionAwareView />
            ) : <Item />}
          </>
        )}
      />
      {fourItemsInView ? <Stuff /> : null}
    </>
  )
}

将 Flatlist 属性 initialNumToRender 设置为 4，这样前四个项目就不会被卸载。
将函数 setFourItemsInView 作为道具传递给您的第 4 个项目，以修改容器组件（具有平面列表的那个）中的布尔值 fourItemsInView
在第 4 个项目组件触发器 setFourItemsInView(true) 的 componentDidMount 上。
编写一个包装器组件来跟踪名为PositionAwareView 的位置，并在第4 项超出屏幕时调用setFourItemsInView。

这是 Typescript 的开始。

import * as React from 'react';
import { View } from 'react-native';

interface IPositionAwareViewProps {
  id: string;
  setFourItemsInView: any;
}
// interface IPositionAwareViewState {}

class PositionAwareView extends React.Component<IPositionAwareViewProps, {}> {
  public state = {
    ref: null
  };
  public ref: View | null;

  public constructor(props: IPositionAwareViewProps) {
    super(props);
    this.ref = null;
  }

  public componentDidMount() {}

  public render() {
    return (
      <View ref={ref => (this.ref = ref)} onLayout={this.onLayout}>
        {this.props.children}
      </View>
    );
  }

  private onLayout = () => {
    if (this.ref) {
      this.ref.measure((x, y, width, height, pageX, pageY) => {
        console.log(this.props.id, 'PositionAwareView x y X Y', x, y, pageX, pageY);
      });
    }
  };
}

export default PositionAwareView;

您还需要注意不同的屏幕尺寸、凹槽（尤其是在 android 中）以及纵向与横向。

免责声明：不确定这将如何运作。也许最好忽略位置跟踪，只在另一个稍后项目的componentDidMount 中使用setFourItemsInView。

【讨论】：

【解决方案2】：

您也可以使用viewabilityConfig 和onViewableItemsChanged

onViewableItemsChanged 将返回一个可查看对象，其中包含有关更改的 FlatList 项状态和屏幕上可查看项的信息。

【讨论】：