如何在FlatList的RenderItem离开屏幕视图时更改其状态？

你原来的方法行不通，因为View组件本身不会触发onScroll事件，滚动事件是由FlatList（底层基于ScrollView）触发的。正确的做法是利用FlatList提供的onViewableItemsChanged属性，它能精准监听哪些项处于可见状态。

实现步骤： #

1. 配置可见性规则：定义viewabilityConfig，设置项的可见百分比阈值，比如超过50%可见才算"在视图内"。
2. 监听可见项变化：通过onViewableItemsChanged回调获取当前可见的项，记录它们的唯一标识（比如ID）。
3. 传递可见状态给子组件：将每个项的可见状态作为props传给Item组件，在子组件内根据这个状态更新自身的outOfView。

修改后的完整代码： #

import { memo, useState, useRef, useCallback } from 'react';
import { View, Text, FlatList } from 'react-native';

const Item = memo(({ content, isVisible }) => {
  const [outOfView, setOutOfView] = useState(false);

  // 当可见状态变化时更新outOfView
  useState(() => {
    if (!isVisible && !outOfView) {
      setOutOfView(true);
    }
    // 可选：如果需要项重新进入视图时重置状态，取消下面的注释
    // if (isVisible && outOfView) {
    //   setOutOfView(false);
    // }
  }, [isVisible, outOfView]);

  return (  
    <View style={styles.item}>
      <Text>{content.title} {outOfView ? '(已离开视图)' : ''}</Text>
    </View>
  );
});

const Slider = props => {
  const flatList = useRef();
  const [visibleItemIds, setVisibleItemIds] = useState(new Set());

  // 定义可见性配置：item超过50%可见时视为在视图内
  const viewabilityConfig = useRef({
    itemVisiblePercentThreshold: 50,
  });

  // 监听可见项变化
  const onViewableItemsChanged = useCallback(({ viewableItems, changed }) => {
    const newVisibleIds = new Set(viewableItems.map(item => item.item._id));
    setVisibleItemIds(newVisibleIds);
  }, []);

  const _renderItem = ({ item, index }) => (
    <Item 
      content={item} 
      isVisible={visibleItemIds.has(item._id)} 
    />
  );

  return (
    <View style={styles.container}>
      {props.header ? <AppText style={styles.header} text={props.header} /> : null}
      <FlatList
        data={props.data}
        horizontal
        pagingEnabled
        renderItem={_renderItem}
        keyExtractor={item => item._id}
        ref={flatList}
        viewabilityConfig={viewabilityConfig.current}
        onViewableItemsChanged={onViewableItemsChanged}
      />
    </View>
  );
};

// 示例样式（可根据实际需求调整）
const styles = {
  container: {
    flex: 1,
    paddingTop: 20,
  },
  item: {
    width: 300,
    height: 200,
    backgroundColor: '#f0f0f0',
    marginHorizontal: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  header: {
    fontSize: 20,
    fontWeight: 'bold',
    padding: 10,
  },
};

关键说明： #

• viewabilityConfig：itemVisiblePercentThreshold控制项需要显示多少比例才算可见，你可以根据需求调整数值（比如设为100表示完全可见才算）。
• useCallback：包裹onViewableItemsChanged避免每次渲染都创建新函数，提升组件性能。
• memo：Item组件用memo包裹，配合isVisible作为依赖，避免不必要的重渲染。

内容的提问来源于stack exchange，提问作者Jat90