为了提供一些背景信息,我正在进行一项专注于数字营销和用户体验的研究。为了进行研究,我必须能够从 UI 中的每个组件获取事件日志,这样我就能够创建可用性模式的数据集。
要在网络界面中执行此操作,例如使用 JavaScript,这非常简单。
window.addEventListener("someEvent", (e) => {//do something with the data});
The e
element 为我提供了我需要的一切,如果我想监听所有窗口事件,我可以通过窗口对象事件运行 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});