React Native中如何在外部自定义组件调用HomeScreen内函数

看起来你在跨组件传递函数时踩了几个小坑，我帮你一一梳理并修正：

问题分析 #

你的代码里有三个核心问题导致函数调用失败：

1. 自定义组件LongPress的props接收错误：你把props拆成了两个参数({children}, props)，这样第二个参数props实际是undefined，根本拿不到传入的action属性。
2. 错误访问函数组件的静态属性：你在LongPressGestureHandler里写了HomeScreen.action，但HomeScreen是函数组件，不存在这个静态属性，你应该用通过props传进来的action函数。
3. 手势回调未判断状态：onHandlerStateChange会在手势的不同状态下触发多次，最好判断状态为激活时再执行操作，避免不必要的重复调用。

修正后的完整代码 #

import React from 'react';
import { View, Text } from 'react-native';
import { LongPressGestureHandler, State } from 'react-native-gesture-handler';

export default function HomeScreen() {
  const doSomething = () => {
    console.log("Works");
  }

  return (
    <View style={{padding: 30}}>
      {/* 正确传递action props给自定义组件 */}
      <LongPress action={doSomething} >
        <View>
          <Text>Long press me</Text>
        </View>
      </LongPress>
    </View>
  );
};

// 正确解构props，同时拿到children和action
function LongPress({ children, action }) {
  const handleGestureStateChange = ({ nativeEvent }) => {
    // 仅当长按达到设定时长（激活状态）时执行函数
    if (nativeEvent.state === State.ACTIVE) {
      // 安全调用传入的action函数，避免未传参时报错
      if (action) action();
    }
  };

  return (
    <LongPressGestureHandler 
      onHandlerStateChange={handleGestureStateChange} 
      minDurationMs={700} 
    >
      <View>{children}</View>
    </LongPressGestureHandler>
  );
};

关键修正点说明 #

• Props接收优化：把LongPress组件的参数改成({ children, action })，这样就能正确获取父组件传递的action函数了。
• 手势状态判断：引入State枚举，判断nativeEvent.state === State.ACTIVE，确保只有当长按完成（达到设定的700ms）时才执行目标函数。
• 安全调用机制：加上if (action) action()的判断，避免当父组件未传入action时出现控制台报错。

这样修改后，长按文本就能正确触发doSomething函数，控制台会输出"Works"啦～

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