React Native Camera切换摄像头类型时缩放重置问题（RCTCamera实现）

嘿，我之前刚好碰到过RCTCamera在Android上切换摄像头时缩放级别不生效的问题，折腾了一会儿找到几个可行的解决方案，分享给你：

问题回顾 #

• 使用组件：RCTCamera
• 复现步骤：
  • 在Android平台创建RCTCamera视图，将zoom属性绑定到this.state.zoom
  • 执行this.setState({ zoom: [任意缩放级别], type: [切换前后置摄像头] })
• 预期：切换后的摄像头保持设置的缩放级别
• 实际：切换后缩放未生效，非切换场景下zoom功能正常

解决方案 #

方案1：JS层通过Ref手动设置Zoom（快速解决） #

这个方法不需要修改原生代码，纯JS层就能实现。核心思路是在摄像头切换完成后，手动调用RCTCamera的setZoom方法，强制将缩放级别应用到新的摄像头实例上。

1. 给RCTCamera添加ref引用：

import RCTCamera from 'react-native-camera';

class CameraComponent extends React.Component {
  cameraRef = null;

  render() {
    return (
      <RCTCamera
        ref={ref => this.cameraRef = ref}
        zoom={this.state.zoom}
        type={this.state.type}
        // 其他必要属性（如style、权限相关）
      />
    );
  }
}

2. 修改切换摄像头的方法，在state更新后延迟设置Zoom：

switchCamera = () => {
  const currentType = this.state.type;
  const newType = currentType === RCTCamera.constants.Type.back 
    ? RCTCamera.constants.Type.front 
    : RCTCamera.constants.Type.back;
  const targetZoom = this.state.zoom;

  this.setState({ type: newType }, () => {
    // 延迟300ms确保摄像头切换完成（时间可根据设备性能调整）
    setTimeout(() => {
      if (this.cameraRef) {
        this.cameraRef.setZoom(targetZoom);
      }
    }, 300);
  });
};

方案2：修改Android原生代码（根源修复） #

如果想从组件层面彻底解决这个问题，可以修改RCTCamera的Android原生代码，让它在切换摄像头时自动同步当前的Zoom值。

1. 找到RCTCamera的原生文件（通常在node_modules/react-native-camera/android/src/main/java/com/lwansbrough/RCTCamera/目录下的RCTCameraView.java）

2. 定义一个变量保存当前Zoom值：

private float mCurrentZoom = 0.0f;

3. 在setZoom方法中更新这个变量：

public void setZoom(float zoom) {
  mCurrentZoom = zoom;
  // 保留原有的设置Zoom的代码...
  if (mCamera != null) {
    Camera.Parameters params = mCamera.getParameters();
    if (params.isZoomSupported()) {
      int maxZoom = params.getMaxZoom();
      int newZoom = (int)(zoom * maxZoom);
      params.setZoom(newZoom);
      mCamera.setParameters(params);
    }
  }
}

4. 在切换摄像头的方法中，切换完成后重新应用Zoom：

private void switchCamera() {
  // 保留原有的切换摄像头的代码...
  
  // 切换完成后同步Zoom值
  if (mCamera != null) {
    Camera.Parameters params = mCamera.getParameters();
    if (params.isZoomSupported()) {
      int maxZoom = params.getMaxZoom();
      int targetZoom = (int)(mCurrentZoom * maxZoom);
      params.setZoom(targetZoom);
      mCamera.setParameters(params);
    }
  }
}

修改完成后，重新编译你的React Native项目，切换摄像头时Zoom值就会自动同步了。

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