在React Native Fabric架构中集成Android Fragment遇空白视图问题

在Fabric新架构中直接复用旧架构的Fragment集成逻辑会因为视图生命周期、布局处理和组件注册方式的差异导致空白，以下是针对性修复步骤：

1. 修正Package注册逻辑（适配Fabric） #

旧架构的ReactPackage在新架构中无法被Fabric正确识别，需要切换为TurboReactPackage：

import com.facebook.react.TurboReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ViewManager

class CenteredTextPackage : TurboReactPackage() {
    override fun getViewManager(reactContext: ReactApplicationContext, viewManagerName: String): ViewManager<*, *>? {
        return if (viewManagerName == CenteredTextManager.NAME) {
            CenteredTextManager(reactContext)
        } else null
    }

    override fun getModule(reactContext: ReactApplicationContext, moduleName: String): NativeModule? = null
}

2. 重构ViewManager适配Fabric生命周期 #

去掉旧架构的命令触发逻辑，改用Fabric的视图更新回调来初始化Fragment，同时移除无效的手动布局代码：

import com.facebook.react.uimanager.SimpleViewManager
import com.facebook.react.uimanager.ThemedReactContext
import android.view.View
import android.widget.FrameLayout
import androidx.fragment.app.FragmentActivity

class CenteredTextManager(private val context: ReactApplicationContext) :
    SimpleViewManager<FrameLayout>() {

    companion object {
        const val NAME = "RTNCenteredText"
    }

    override fun getName(): String = NAME

    override fun createViewInstance(reactContext: ThemedReactContext): FrameLayout {
        return FrameLayout(reactContext).apply {
            id = View.generateViewId() // 为容器生成唯一ID，用于Fragment替换
        }
    }

    override fun onAfterUpdateTransaction(view: FrameLayout) {
        super.onAfterUpdateTransaction(view)
        // 仅在容器为空时初始化Fragment，避免重复创建
        if (view.childCount == 0) {
            val activity = context.currentActivity as FragmentActivity
            activity.supportFragmentManager.beginTransaction()
                .replace(view.id, CenteredTextFragment())
                .commit()
        }
    }
}

3. 修复自定义View的布局参数 #

让CenteredText填充Fragment容器，避免因WRAP_CONTENT导致的空白：

import android.content.Context
import android.graphics.Color
import android.widget.LinearLayout
import android.widget.TextView

class CenteredText(context: Context) : LinearLayout(context) {

    private var textView: TextView
    private var secondtextView: TextView

    init {
        // 修改为MATCH_PARENT，填充父容器
        val layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
        setLayoutParams(layoutParams)
        orientation = VERTICAL
        gravity = CENTER // 可选：让文本居中，更符合组件语义

        textView = TextView(context).apply {
            textSize = 25F
            addView(this)
        }

        secondtextView = TextView(context).apply {
            text = "Hello I am second"
            textSize = 25F
            setTextColor(Color.RED)
            addView(this)
        }
    }

    fun configureText(text: String) {
        textView.text = text
    }
}

4. 简化Fragment实现 #

移除不必要的生命周期重写，保持简洁：

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment

class CenteredTextFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return CenteredText(requireContext())
    }
}

关键修复点说明 #

• Package适配：Fabric仅识别TurboReactPackage注册的组件，旧包类型会导致组件无法加载
• 视图生命周期：利用onAfterUpdateTransaction确保视图完成RN侧布局后再初始化Fragment，避免容器尺寸为0
• 布局参数修正：自定义View使用MATCH_PARENT填充容器，解决WRAP_CONTENT导致的内容不可见问题
• 移除无效逻辑：Fabric会自动处理视图测量，无需手动通过Choreographer强制布局，冗余代码会导致布局异常

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