React Native中调用组件内部函数报TypeError的解决方法

错误原因 #

你遇到的TypeError: undefined is not a function是因为：

1. HelloWorldApp是React函数组件，snapShotTaker是组件内部定义的局部函数，不是组件的静态属性，直接通过HelloWorldApp.snapShotTaker()访问必然得到undefined。
2. notifee.registerForegroundService的回调运行在组件渲染上下文之外，和组件的状态、ref完全隔离，就算能拿到函数，也会因为丢失组件上下文导致cameraRef等依赖失效。

解决方案 #

我们可以通过全局引用保存组件内的函数，同时处理组件生命周期和Service停止时的清理逻辑：

步骤1：定义全局引用容器 #

在文件顶部（组件外部）定义一个全局变量，用来存储snashotTaker的引用：

let globalSnapshotTaker = null;

步骤2：在组件内绑定并清理引用 #

在HelloWorldApp组件中，使用useEffect将snashotTaker赋值给全局变量，并在组件卸载时清空：

const HelloWorldApp = () => {
  // ... 你的原有代码（cameraRef、devices等）

  const snapShotTaker = async () => {
    const snapshot = await cameraRef.current.takeSnapshot({
      quality: 20,
      skipMetadata: true,
    });
    setPhotoPath('file://' + snapshot.path);
  };

  // 挂载时保存函数引用，卸载时清空
  useEffect(() => {
    globalSnapshotTaker = snapShotTaker;
    return () => {
      globalSnapshotTaker = null;
    };
  }, [snapShotTaker]); // 依赖snapShotTaker，确保每次更新后引用都是最新的

  // ... 你的原有代码（返回JSX等）
};

步骤3：修改Foreground Service回调 #

在Service回调中调用全局引用的函数，同时添加存在性检查和定时器清理：

notifee.registerForegroundService(notification => {
  // 保存定时器ID，用于停止时清理
  const intervalId = setInterval(() => {
    // 先检查函数是否存在，避免组件卸载后报错
    if (globalSnapshotTaker) {
      // 异步函数要捕获错误，避免未处理异常
      globalSnapshotTaker().catch(err => console.error('拍摄快照失败:', err));
    }
  }, 2000);

  return new Promise((resolve) => {
    // 监听Service停止事件，清理定时器
    notification.onStop(() => {
      clearInterval(intervalId);
      resolve();
    });
  });
});

注意事项 #

• 一定要处理异步函数的错误：snapShotTaker是async函数，调用后必须用.catch()捕获异常，避免崩溃。
• 组件卸载时清空全局引用：防止调用到已经失效的函数（比如cameraRef已被销毁）。
• 清理Service定时器：在Service停止时清除定时器，避免内存泄漏。

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