React Native：如何在useEffect中通过ref为View绑定事件处理函数

问题原因 #

React Native的View组件通过useRef获取的current对象，不是Web环境中的DOM节点，而是React Native的原生视图实例。它没有Web DOM的addEventListener方法，也不能直接通过onTouchEnd()这样的方式绑定事件——这是React Native和Web React的核心差异之一。

正确解决方案 #

方案1：直接通过组件props绑定事件（推荐） #

React Native的触摸事件是通过组件props直接声明的，这是官方推荐的标准写法，无需借助ref：

import { View } from 'react-native';

export default function App() {
  const handleTouchEnd = (e) => {
    // 执行你的逻辑
    console.log('触摸结束', e);
  };

  return (
    <View 
      onTouchEnd={handleTouchEnd} 
      style={styles.container}
    >
      <DummyComponent />
    </View>
  );
}

方案2：动态控制事件绑定（基于状态） #

如果需要在useEffect中根据条件动态开启/关闭事件监听，可以通过状态变量控制事件是否生效：

import { View, useState, useEffect } from 'react-native';

export default function App() {
  const [isTouchActive, setIsTouchActive] = useState(false);

  const handleTouchEnd = (e) => {
    if (!isTouchActive) return;
    // 执行你的逻辑
  };

  useEffect(() => {
    // 模拟在某些条件下开启事件监听
    const timer = setTimeout(() => {
      setIsTouchActive(true);
    }, 1000);

    return () => clearTimeout(timer);
  }, []);

  return (
    <View 
      onTouchEnd={handleTouchEnd} 
      style={styles.container}
    >
      <DummyComponent />
    </View>
  );
}

方案3：监听底层原生事件（特殊场景） #

如果确实需要监听底层原生事件（极少业务场景需要），可以使用NativeEventEmitter配合视图节点ID，但这种方式复杂度较高，非必要不推荐：

import { View, useRef, useEffect, NativeEventEmitter, UIManager, findNodeHandle } from 'react-native';

export default function App() {
  const viewRef = useRef();

  useEffect(() => {
    if (!viewRef.current) return;

    const nodeId = findNodeHandle(viewRef.current);
    const emitter = new NativeEventEmitter(UIManager);
    const subscription = emitter.addListener(
      `topTouchEnd`, // React Native原生触摸结束事件的标识
      (event) => {
        // 仅当事件来自当前视图时处理
        if (event.target === nodeId) {
          console.log('原生触摸结束事件', event);
        }
      }
    );

    return () => subscription.remove();
  }, []);

  return (
    <View ref={viewRef} style={styles.container}>
      <DummyComponent />
    </View>
  );
}

总结 #

React Native的事件系统是基于组件props设计的，优先使用props绑定事件是最简洁、符合规范的方式。避免用Web DOM的思维去操作React Native的组件ref，这会导致属性未定义的错误。

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