React Native中DraxView事件函数定义与调用的正确方式

核心问题分析 #

你遇到的问题有两个关键点：

1. 组件名称错误：导入的是DraxView，但渲染时误用了DragView，导致组件未正确初始化，事件绑定完全失效。
2. 事件绑定方式错误：直接写onDragDrop={console.log('message')}会在组件首次渲染时立即执行该语句，而非仅在事件触发时执行。

正确的实现方式 #

方式一：使用已声明的函数引用

修正组件名称，并直接传递函数名（不要加括号，加括号会立即执行函数）：

import { DraxView } from 'react-native-drax';

function MyComponent(props) {
  function test() { console.log('message') }
  const test2 = () => { console.log('message') }
  
  return (
    <DraxView
      onDragDrop={test} // 传递函数引用，事件触发时才会调用
    >
    </DraxView>
  )
}

方式二：直接使用箭头函数包裹

如果不需要复用函数，也可以直接在事件属性中写箭头函数，确保只有事件触发时才执行代码：

import { DraxView } from 'react-native-drax';

function MyComponent(props) {
  return (
    <DraxView
      onDragDrop={() => console.log('message')}
    >
    </DraxView>
  )
}

原理说明 #

• React 事件属性要求接收一个函数引用，当事件触发时，React 会自动调用这个函数。
• 若直接写函数调用（如console.log('message')），相当于把函数执行后的结果（这里是undefined）传给事件属性，同时在组件渲染时就会执行一次该函数。
• 组件名称必须和导入的一致，否则 React 会将其视为未定义的自定义组件，无法触发任何内置事件。

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