获取所有元素的触发事件

Question

为了提供一些背景信息，我正在进行一项专注于数字营销和用户体验的研究。为了进行研究，我必须能够从 UI 中的每个组件获取事件日志，这样我就能够创建可用性模式的数据集。

要在 Web 界面中执行此操作（例如使用 JavaScript）非常简单。

window.addEventListener("someEvent", (e) => {//do something with the data});

该e元素为我提供了所需的一切，如果我想监听所有窗口事件，我可以通过窗口对象事件运行 for 循环，并向每个. 我的问题是移动开发。出于跨应用程序的原因，我是否正在使用 React Native 来尝试创建与window.addEventListener移动应用程序相同的效果。

这是我第一次使用 React Native。经过一番搜索，我现在知道 React Native 没有 window 对象（至少不是我们理解的 JavaScript 中的 window 对象），并且该界面被转换为平台本机组件，因此document.getElementBy...也不起作用。

我想到的是refs。我只需要添加对顶部组件的引用App。那么到目前为止我所做的工作是：

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

  useEffect(() => {
    //I can use ref here to iterate through all events of View and
    //bind event listeners to it
  }, [viewRef]);

  return (
    <View
      ref={viewRef}
      style={styles.container}
      onTouchEnd={(e) => {
        console.log(e.target);
      }}
    >
      <DummyComponent />
    </View>
  );
}

onTouchEnd事件绑定到顶层组件，因此我可以获得它的子组件的所有内容。在那个 useEffect 中，我可以做与 JavaScript 窗口相同的事情。

所以我想这是一种方法。然而，在我的研究中，我希望使任何 React Native 应用程序能够开始无缝记录事件。最先进的技术是创建一个依赖项，只需安装它即可记录所有内容。也就是说，如何迭代 React Native 应用程序来查找视图并绑定它们的事件，而不需要向实际组件添加任何内容？

在 JavaScript 中，它会是这样的：

document.getElementsByTagName("View").map((view) => {//bind view events});

Answer 1

所以我不确定这是否有帮助，但您可以在应用程序启动时更改组件的 defaultProps。

因此，以您的代码为例，您可以执行以下操作：

const listener = e => {
  console.log(e);
}

View.defaultProps = {
  ...View.defaultProps, // maintains original default props
  onTouchEnd: listener
};

基本上这样你就可以为每个视图组件拥有一个全局监听器