React Native中如何检测元素是否进入视口？

针对你需要检测图片、容器进入视口并触发console.log的需求，这里提供两种实用方案：

方案一：使用React Native原生的onViewableItemsChanged（推荐） #

这个API适配基于ScrollView或FlatList的滚动场景，你的代码中带scroll属性的Block应该是封装了ScrollView，可以直接利用该功能：

步骤1：配置可视图项判定规则 #

在组件中定义判定条件，比如元素可见比例达到50%时视为进入视口：

const viewabilityConfig = {
  itemVisiblePercentThreshold: 50, // 自定义可见比例阈值
};

步骤2：实现视口变化回调 #

编写回调函数，监听元素进入/离开视口的状态：

const onViewableItemsChanged = ({ changed }) => {
  changed.forEach(item => {
    if (item.isViewable) {
      // 根据元素key区分目标对象
      switch(item.key) {
        case 'ad-container':
          console.log('广告容器已进入视口');
          break;
        case 'ad-image':
          console.log('广告图片已进入视口');
          break;
      }
    }
  });
};

步骤3：改造滚动容器与目标元素 #

给滚动容器添加回调与配置属性，同时给需要检测的元素设置唯一key：

<Block 
  scroll  
  showsVerticalScrollIndicator={false}
  onViewableItemsChanged={onViewableItemsChanged}
  viewabilityConfig={viewabilityConfig}
>  
    <Block color={colors.card} flex={0}> 
        {/* 原有水平滚动区域代码保持不变 */}
    </Block>
    
    <Block card flex={0} marginTop={1} marginHorizontal="2%">
      <Block  
          card  
          row={isHorizontal}
          marginBottom={sizes.sm}
          width={CARD_WIDTH * 2  + sizes.sm}
          key="ad-container" // 给容器设置唯一key
          >
          <TouchableOpacity>
          <Image 
            alignSelf="center"
            key="ad-image" // 给图片设置唯一key
            source={{uri:'http://192.168.56.1:8000/directAd/uploads/'+topPageAd.picture }}
            style={{
              width: win.width/1,
                height: 150,  
                resizeMode: "contain",
                alignSelf: "center",
                borderRadius: 20,
            }}
          />
          </TouchableOpacity>
           
        </Block>            
    </Block>            
</Block>

方案二：使用社区库react-native-intersection-observer #

如果滚动场景复杂，或不想依赖原生滚动组件的API，可以用这个轻量库：

步骤1：安装依赖 #

npm install react-native-intersection-observer
# 或使用yarn
yarn add react-native-intersection-observer

步骤2：包裹目标元素检测 #

用Observe组件包裹需要检测的元素，通过onChange回调判断视口状态：

import { Observe } from 'react-native-intersection-observer';

// 组件内使用示例
<Block card flex={0} marginTop={1} marginHorizontal="2%">
  <Observe onChange={(inView) => {
    if (inView) console.log('广告容器已进入视口');
  }}>
    <Block  
        card  
        row={isHorizontal}
        marginBottom={sizes.sm}
        width={CARD_WIDTH * 2  + sizes.sm}>
        <TouchableOpacity>
        <Observe onChange={(inView) => {
          if (inView) console.log('广告图片已进入视口');
        }}>
          <Image 
            alignSelf="center"
            source={{uri:'http://192.168.56.1:8000/directAd/uploads/'+topPageAd.picture }}
            style={{
              width: win.width/1,
                height: 150,  
                resizeMode: "contain",
                alignSelf: "center",
                borderRadius: 20,
            }}
          />
        </Observe>
        </TouchableOpacity>
         
      </Block>            
  </Observe>
</Block>

注意：如果你的Block是自定义组件，需确保它能传递onLayout、ref等属性给内部原生视图，否则库可能无法正常工作。

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