React Native应用中Android原生Fragment已加载但无法显示如何解决

1. 先解决Fragment事务commit返回-1的问题 #

commit返回-1的核心原因是传入的容器IDreactNativeViewId对应的视图未被添加到当前Activity的视图树中，可按以下步骤排查：

• 确认你使用的reactNativeViewId是Android端原生代码生成的、合法的View资源ID，不要直接传入RN JS侧返回的ViewID使用
• 调整Fragment事务的执行时机：不要在自定义原生View的构造方法中执行事务，要放到View的onAttachedToWindow回调中执行，确保此时容器视图已经成功挂载到Activity的视图树
• 若你是在异步回调/Activity的onSaveInstanceState执行之后触发的事务，可先改用commitAllowingStateLoss()替代commit()验证是否是生命周期时机问题

2. 解决Fragment层级过低被遮挡的问题 #

你之前调用bringToFront不生效，是因为你只操作了Fragment内部的子View，没有调整承载Fragment的容器本身的层级，按以下步骤操作即可：

• 先获取承载Fragment的容器视图，先对容器执行前置操作，再刷新布局：

View fragmentContainer = activity.findViewById(reactNativeViewId);
if (fragmentContainer != null) {
    fragmentContainer.bringToFront();
    fragmentContainer.requestLayout();
    fragmentContainer.invalidate();
}

• 适配Android高程规则：Android 5.0及以上系统中elevation属性优先级高于视图添加顺序，给你的Fragment根布局、容器视图设置高于RN根视图的elevation值即可，示例：

<!-- Fragment的根布局增加elevation属性 -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:elevation="4dp">
    <!-- 你的TextView等控件 -->
</LinearLayout>

• 排查RN侧遮挡：确认RN JS层对应位置的View没有设置不透明的背景色，可先临时设置为透明验证是否是JS侧视图遮挡导致的看不见

3. 额外排查点 #

如果以上操作都执行后仍看不见内容，检查你封装的RN原生容器View是否重写了onMeasure、onLayout方法，给容器正确的宽高尺寸，避免容器尺寸为0导致内容不可见。

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