React Native新架构中嵌入CameraX原生视图出现黑屏与布局异常问题

看起来你在React Native新架构里嵌入CameraX原生视图时遇到了布局乱掉、相机黑屏的双重问题，我来帮你拆解下问题根源和解决办法：

问题根源分析 #

你代码里的setupLayoutHack()、manuallyLayoutChildren()以及重写的onLayout/onMeasure方法是核心祸首——这些代码强制让所有子View铺满整个父容器，直接把PreviewView和拍照按钮重叠在一起，所以你只能看到上层的按钮，相机被完全盖住了。

在纯原生Android里，这些“野路子”的布局hack可能因为原生布局流程的优先级没被触发或者影响较小，但RN新架构的Fabric视图桥接层对布局测量的处理更严格，这种手动篡改测量布局的操作会直接打乱正常的布局流程，放大了问题。

另外，CameraX的初始化如果没处理好权限、生命周期绑定，也会导致相机黑屏不显示。

分步解决办法 #

1. 先删掉破坏布局的手动干预代码 #

首先把这些代码完全移除：

• setupLayoutHack()方法
• manuallyLayoutChildren()方法
• 重写的onLayout和onMeasure方法

这些代码完全违背了Android的布局测量规范，在RN新架构下只会帮倒忙，必须清理干净。

2. 修复ConstraintLayout版本的布局逻辑 #

如果还是想用ConstraintLayout，正确的写法应该完全依赖ConstraintSet的约束，交给系统自动处理布局。修改后的configureComponent方法示例：

private fun configureComponent(context: Context) {
    // 父容器布局参数
    layoutParams = ViewGroup.LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.MATCH_PARENT
    )

    // 初始化PreviewView
    viewFinder.id = View.generateViewId()
    val previewParams = ConstraintLayout.LayoutParams(
        ConstraintLayout.LayoutParams.MATCH_CONSTRAINT,
        ConstraintLayout.LayoutParams.MATCH_CONSTRAINT
    )
    addView(viewFinder, previewParams)

    // 初始化拍照按钮
    button.id = View.generateViewId()
    button.text = "Take Photo"
    button.setBackgroundColor(Color.YELLOW)
    button.setTextColor(Color.RED)
    val buttonParams = ConstraintLayout.LayoutParams(
        ConstraintLayout.LayoutParams.MATCH_CONSTRAINT,
        ConstraintLayout.LayoutParams.WRAP_CONTENT
    )
    addView(button, buttonParams)

    // 应用约束，让PreviewView铺满容器（底部留空给按钮），按钮固定在底部
    val constraintSet = ConstraintSet()
    constraintSet.clone(this)

    // 约束PreviewView
    constraintSet.constrainWidth(viewFinder.id, ConstraintSet.MATCH_CONSTRAINT)
    constraintSet.constrainHeight(viewFinder.id, ConstraintSet.MATCH_CONSTRAINT)
    constraintSet.connect(viewFinder.id, ConstraintSet.LEFT, ConstraintSet.PARENT_ID, ConstraintSet.LEFT)
    constraintSet.connect(viewFinder.id, ConstraintSet.RIGHT, ConstraintSet.PARENT_ID, ConstraintSet.RIGHT)
    constraintSet.connect(viewFinder.id, ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP)
    constraintSet.connect(viewFinder.id, ConstraintSet.BOTTOM, button.id, ConstraintSet.TOP)

    // 约束按钮
    constraintSet.constrainWidth(button.id, ConstraintSet.MATCH_CONSTRAINT)
    constraintSet.constrainHeight(button.id, ConstraintSet.WRAP_CONTENT)
    constraintSet.connect(button.id, ConstraintSet.LEFT, ConstraintSet.PARENT_ID, ConstraintSet.LEFT)
    constraintSet.connect(button.id, ConstraintSet.RIGHT, ConstraintSet.PARENT_ID, ConstraintSet.RIGHT)
    constraintSet.connect(button.id, ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM, dpToPx(20, context))

    constraintSet.applyTo(this)

    // 绑定点击事件和相机初始化
    button.setOnClickListener { takePhoto() }
    setUpCamera(context)
}

// 工具方法：dp转px（避免硬写像素值）
private fun dpToPx(dp: Int, context: Context): Int {
    return (dp * context.resources.displayMetrics.density).toInt()
}

3. 简化版：FrameLayout布局实现 #

如果想更简单，用FrameLayout的布局规则会更直接，让PreviewView铺满容器，按钮固定在底部：

private fun configureComponent(context: Context) {
    layoutParams = ViewGroup.LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.MATCH_PARENT
    )

    // PreviewView铺满整个父容器
    viewFinder.layoutParams = FrameLayout.LayoutParams(
        FrameLayout.LayoutParams.MATCH_PARENT,
        FrameLayout.LayoutParams.MATCH_PARENT
    )
    addView(viewFinder)

    // 按钮固定在底部，宽度充满屏幕
    val buttonParams = FrameLayout.LayoutParams(
        FrameLayout.LayoutParams.MATCH_PARENT,
        FrameLayout.LayoutParams.WRAP_CONTENT
    )
    buttonParams.gravity = Gravity.BOTTOM
    buttonParams.bottomMargin = dpToPx(20, context)
    button.text = "Take Photo"
    button.setBackgroundColor(Color.YELLOW)
    button.setTextColor(Color.RED)
    addView(button, buttonParams)

    button.setOnClickListener { takePhoto() }
    setUpCamera(context)
}

4. 检查CameraX的初始化逻辑 #

如果布局修复后相机还是黑屏，要重点检查setUpCamera方法：

1. 权限问题：确保在AndroidManifest.xml中添加相机权限，并且在RN侧或原生侧动态申请权限：

   <uses-permission android:name="android.permission.CAMERA" />
   

2. 生命周期绑定：CameraX需要依赖Lifecycle来管理相机的启动/销毁，你的自定义View需要实现LifecycleOwner接口，或者绑定宿主Activity的Lifecycle。标准的CameraX初始化示例：

   private fun setUpCamera(context: Context) {
       cameraExecutor = Executors.newSingleThreadExecutor()
       val cameraProviderFuture = ProcessCameraProvider.getInstance(context)
   
       cameraProviderFuture.addListener({
           mCameraProvider = cameraProviderFuture.get()
   
           // 初始化预览用例
           val preview = Preview.Builder()
               .build()
               .also {
                   it.setSurfaceProvider(viewFinder.surfaceProvider)
               }
   
           // 初始化拍照用例
           imageCapture = ImageCapture.Builder()
               .build()
   
           // 选择后置相机
           val cameraSelector = CameraSelector.DEFAULT_BACK_CAMERA
   
           try {
               mCameraProvider?.unbindAll()
               // 这里如果自定义View没实现LifecycleOwner，可以用(context as AppCompatActivity).lifecycle替代
               mCameraProvider?.bindToLifecycle(
                   this as LifecycleOwner,
                   cameraSelector,
                   preview,
                   imageCapture
               )
           } catch(exc: Exception) {
               Log.e("ReactMyCamera", "相机绑定失败", exc)
           }
       }, ContextCompat.getMainExecutor(context))
   }
   

最后提醒 #

RN新架构的Fabric视图系统和旧架构、纯原生Android的布局逻辑差异很大，核心原则是：让系统的布局测量流程自动执行，不要手动干预子View的measure和layout。先把布局hack删掉，再逐步排查CameraX的权限和生命周期问题，应该就能解决你的问题了。

内容来源于stack exchange