React自定义hook useCamera导出的camRef绑定NativeCamera不生效求解决方案

你的透传逻辑失效，核心原因基本为以下两种：

• NativeCamera 为未做 ref 转发的函数组件：React 原生不支持函数组件直接接收 ref 属性，未使用 forwardRef 包裹的函数组件，传入的 ref 会被直接丢弃，不会挂载到实际实例上
• 第三方 NativeCamera 组件未将根实例绑定到默认 ref 属性，而是自定义了专属的实例绑定字段

方案1：对 NativeCamera 做 ref 转发（最推荐，适配你现有代码不需要改其他逻辑） #

如果 NativeCamera 是你自行维护的组件，用 forwardRef 包裹组件即可：

import { forwardRef } from 'react';

const NativeCamera = forwardRef((props, ref) => {
  // 内部将 ref 绑定到实际的相机原生实例/根 DOM 节点上
  return <实际相机渲染根节点 ref={ref} {...props} />
});

export default NativeCamera;

方案2：改用回调 ref 实现实例绑定（无需修改 NativeCamera 内部逻辑） #

如果无法修改 NativeCamera 的定义，调整自定义 hook 和调用侧的 ref 绑定方式即可：

修改 useCamera 逻辑： #

export default function useCamera() {
  const [cameraRatio, setCameraRatio] = useState(Camera.Constants.DesiredRatio);
  const [cameraType, setCameraType] = useState(Camera.Constants.Type.back);
  const [flashMode, setFlashMode] = useState(Camera.Constants.FlashMode.off);

  const camRef = useRef(null);
  // 新增回调 ref 用来接收外部实例
  const setCamRef = useCallback((instance) => {
    camRef.current = instance;
  }, []);
  const cameraTypeRef = useRef(cameraType);
  const isTakingPhoto = useRef(false);

  const takePhoto = () => {
    if(!camRef.current) return;
    // 原有拍照逻辑不变
  }

  // 其余方法逻辑不变

  return {
    setCamRef, // 替换原有的 camRef 导出
    cameraRatio,
    cameraType,
    flashMode,
    takePhoto,
    flip,
    toggleFlashMode,
    ...
  }
}

修改调用侧 Camera 组件： #

function Camera({ ... }) {
  const {
    setCamRef,
    takePhoto,
    ...
  } = useCamera();
  
  return <NativeCamera ref={setCamRef} onTakePhoto={takePhoto} ... />
}

方案3：适配第三方组件的自定义 ref 字段 #

如果 NativeCamera 是第三方组件，先查阅组件文档确认实例绑定的专属字段，很多第三方相机组件不会用默认 ref 传递实例，而是自定义了如 cameraRef 这类字段，直接将 camRef 绑定到对应字段即可，示例：

return <NativeCamera cameraRef={camRef} onTakePhoto={takePhoto} ... />

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