Expo Camera：pausePreview打印为函数但调用报错，takePictureAsync正常

问题 #

使用Expo Camera SDK开发时，打印cameraRef.current.pausePreview显示为[function pausePreview]，但调用cameraRef.current.pausePreview()时触发错误：TypeError: this._cameraRef.current?.pausePreview is not a function (it is undefined)。而同样打印为[Function takePictureAsync]的cameraRef.current.takePictureAsync()却能正常调用，请问为何会出现这种差异？

相关代码 #

async function capturePhoto(){
  if (!cameraRef) return;
  console.log("ayeee", cameraRef.current.takePictureAsync, cameraRef.current.pausePreview)
  cameraRef.current.pausePreview();
  let photo = await cameraRef.current.takePictureAsync();
  if (facing === 'front') {
      photo = await manipulateAsync(
          photo.localUri || photo.uri,
          [
              { rotate: 180 },
              { flip: FlipType.Vertical },
          ],
          { compress: 1, format: SaveFormat.PNG }
      );
  }
  setSelectingImage(photo.uri)
  setTakingPhoto(false)
}      

<CameraView 
  ref={cameraRef} 
  flash={flash ? 'on' : 'off'}
  style={{width: scale(330), height: scale(400), overflow: 'hidden' }} 
  facing={facing}
/>

日志信息 #

LOG  ayeee [Function takePictureAsync] [Function pausePreview]
 WARN  Possible Unhandled Promise Rejection (id: 6):
TypeError: this._cameraRef.current?.pausePreview is not a function (it is undefined)

原因与解决方案 #

• 函数上下文丢失：pausePreview方法内部依赖this指向CameraView实例，但直接调用时this指向异常（严格模式下为undefined），导致方法执行时无法访问内部的_cameraRef。而takePictureAsync的实现不依赖this上下文，或内部已做了绑定处理，因此能正常调用。
• 修复方式：
  1. 强制绑定上下文调用：将cameraRef.current.pausePreview()改为cameraRef.current.pausePreview.call(cameraRef.current)，确保this指向CameraView实例。
  2. 提前绑定方法：在获取到cameraRef后，绑定方法到实例：

     const pausePreview = cameraRef.current.pausePreview.bind(cameraRef.current);
     pausePreview();
     

  3. 升级Expo Camera版本：部分旧版本SDK存在方法绑定的bug，升级到expo-camera最新稳定版可解决此类问题。

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