使用 React Native 实现组件可见性传感器

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
 
const VisibilitySensor = ({ onVisibilityChange }) => {
  const [isVisible, setIsVisible] = useState(false);
 
  useEffect(() => {
    let handleVisibilityChange;
    const element = ref.current;
    if (element) {
      handleVisibilityChange = () => {
        const isVisible = element.getBoundingClientRect().top < window.innerHeight;
        if (isVisible !== this.state.isVisible) {
          onVisibilityChange(isVisible);
          setIsVisible(isVisible);
        }
      };
      window.addEventListener('scroll', handleVisibilityChange);
      handleVisibilityChange();
    }
    return () => window.removeEventListener('scroll', handleVisibilityChange);
  }, []);
 
  return (
    <View ref={ref}>
      {isVisible && <Text>组件处于可见状态</Text>}
    </View>
  );
};
 
export default VisibilitySensor;

这个代码实例使用了React的useEffect和useState钩子，以及React Native的View和Text组件来实现一个简单的可见性传感器。当组件进入或离开视窗时，会触发onVisibilityChange回调函数，并更新状态isVisible。这个例子提供了一个基本的实现方式，可以根据具体需求进行扩展和优化。