React Native中CameraX预览无法填满FrameLayout的问题求助

问题描述 #

在React Native的Android Fragment中集成CameraX时，已为FrameLayout及内部PreviewView设置MATCH_PARENT布局参数，甚至替换为LinearLayout、ConstraintLayout，仍存在Camera预览无法填满整个FrameLayout的问题——预览区域下方出现空白（空白为FrameLayout的蓝色背景，说明容器已占满设置的空间，但预览未填满容器）。

相关代码 #

Android原生代码 #

class CealScanQrView(context: Context): FrameLayout(context) {

 init {
        val frameLayoutParams = ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT
        )
        layoutParams = frameLayoutParams
        setLayoutParams(layoutParams)
        setBackgroundColor(Color.parseColor("#5FD3F3"))

        preview = PreviewView(context)
        preview.id = View.generateViewId()
        preview.layoutParams = ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT
        )
        addView(preview)
}
// 其他无关代码
......
}

React Native端代码 #

const App = () => {
// 无关代码
.....

 return (
    <SafeAreaView>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />

      {isCameraPermissionGranted ? (
        <CealScanQrViewManager
          style={{
            // 将dpi转换为px，设置期望高度
            height: PixelRatio.getPixelSizeForLayoutSize(200),
            // 将dpi转换为px，设置期望宽度
            width: PixelRatio.getPixelSizeForLayoutSize(200),
          }}
          ref={ref}
          onChange={readQr}
        />
      ) : (
        <View style={{backgroundColor: 'red'}} />
      )}
      <Text style={{color: 'red', fontSize: 25}}>{firstText}</Text>
      <Text style={{color: 'red', fontSize: 25}}>{secondText}</Text>
    </SafeAreaView>
  );
} 

问题原因 #

CameraX的PreviewView默认会保持相机预览的比例适配，不会强制拉伸填满容器。当容器的宽高比与相机预览的原生宽高比不匹配时，PreviewView会自动在上下或左右留空，以保证画面不失真，这就是出现空白的核心原因。另外，React Native端设置的固定宽高（200dp转px）大概率和相机支持的预览比例不一致，进一步放大了这个问题。

解决办法 #

方法1：强制拉伸填满容器（可能导致画面变形） #

修改PreviewView的缩放策略，让预览画面强制拉伸填满整个容器：

// 可选FILL_START/FILL_CENTER/FILL_END，效果略有差异
preview.scaleType = PreviewView.ScaleType.FILL_CENTER

方法2：让容器适配相机预览比例（无变形） #

1. 在原生代码中获取相机支持的预览比例，动态调整容器的宽高比：

// 初始化CameraX时获取预览尺寸
val cameraProvider = ProcessCameraProvider.getInstance(context).get()
val cameraSelector = CameraSelector.DEFAULT_BACK_CAMERA
val previewUse = Preview.Builder().build()

previewUse.setSurfaceProvider(preview.surfaceProvider)

// 获取相机原生预览尺寸并计算比例
val camera = cameraProvider.bindToLifecycle(this as LifecycleOwner, cameraSelector, previewUse)
val previewSize = camera.cameraInfo.previewSize
val ratio = previewSize.width.toFloat() / previewSize.height.toFloat()

// 动态调整容器宽高（示例：固定宽度，按比例计算高度）
val layoutParams = this.layoutParams
layoutParams.height = (layoutParams.width / ratio).toInt()
this.layoutParams = layoutParams

2. React Native端修改样式，不再固定宽高，例如只设置宽度，让原生端自动适配高度：

style={{
  width: PixelRatio.getPixelSizeForLayoutSize(200),
}}

方法3：裁剪多余区域（保持比例，无变形） #

如果需要保留容器固定宽高，同时不想画面变形，可以设置裁剪模式，让超出容器的预览部分被裁剪：

preview.scaleType = PreviewView.ScaleType.CENTER_CROP

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