React Native应用首次启动崩溃，二次启动正常问题求助

问题场景 #

• 首次启动应用触发崩溃，报错：

  java.lang.IllegalStateException: Unable to attach a rootView to ReactInstance when UIManager is not properly initialized.
    com.facebook.react.ReactInstanceManager.attachRootViewToInstance(ReactInstanceManager.java:1245)
    com.facebook.react.ReactInstanceManager.attachRootView(ReactInstanceManager.java:890)
    com.facebook.react.ReactRootView.attachToReactInstanceManager(ReactRootView.java:822)
    com.facebook.react.ReactRootView.onMeasure(ReactRootView.java:183)
    android.view.View.measure(View.java:25466)
    android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:6957)
    android.widget.FrameLayout.onMeasure(FrameLayout.java:194)
    android.view.View.measure(View.java:25466)
    android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:6957)
    android.widget.FrameLayout.onMeasure(FrameLayout.java:194)
    androidx.appcompat.widget.ContentFrameLayout.onMeasure(ContentFrameLayout.java:145)
    android.view.View.measure(View.java:25466)
    android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:6957)
    android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1552)
    android.widget.LinearLayout.measureVertical(LinearLayout.java:842)
    android.widget.LinearLayout.onMeasure(LinearLayout.java:721)
    android.view.View.measure(View.java:25466)
    android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:6957)
    android.widget.FrameLayout.onMeasure(FrameLayout.java:194)
    android.view.View.measure(View.java:25466)
    android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:6957)
    android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1552)
    android.widget.LinearLayout.measureVertical(LinearLayout.java:842)
    android.widget.LinearLayout.onMeasure(LinearLayout.java:721)
    android.view.View.measure(View.java:25466)
    android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:6957)
    android.widget.FrameLayout.onMeasure(FrameLayout.java:194)
    com.android.internal.policy.DecorView.onMeasure(DecorView.java:747)
    android.view.View.measure(View.java:25466)
    android.view.ViewRootImpl.performMeasure(ViewRootImpl.java:3397)
    android.view.ViewRootImpl.measureHierarchy(ViewRootImpl.java:2228)
    android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2486)
    android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1952)
    android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:8171)
    android.view.Choreographer$CallbackRecord.run(Choreographer.java:972)
    android.view.Choreographer.doCallbacks(Choreographer.java:796)
    android.view.Choreographer.doFrame(Choreographer.java:731)
    android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:957)
    android.os.Handler.handleCallback(Handler.java:938)
    android.os.Handler.dispatchMessage(Handler.java:99)
    android.os.Looper.loop(Looper.java:223)
    android.app.ActivityThread.main(ActivityThread.java:7656)
    java.lang.reflect.Method.invoke(Native Method)
    com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592)
    com.android.internal.os.ZygoteInit.main(ZygoteInit.java:947)
  

• 二次启动应用恢复正常
• Expo开发环境、iOS TestFlight测试版本均出现该问题
• 移除可疑依赖后问题消失，但希望保留依赖前提下解决

解决方案 #

1. 延迟RootView附加，等待初始化完成

确保ReactInstanceManager和UIManager完全初始化后再附加RootView：

• Expo JS层使用AppLoading等待初始化：

  import { AppLoading } from 'expo';
  import { useState } from 'react';
  
  export default function App() {
    const [isReady, setIsReady] = useState(false);
  
    const waitForInit = async () => {
      // 可添加依赖初始化逻辑，或简单延迟确保UIManager就绪
      await new Promise(resolve => setTimeout(resolve, 300));
    };
  
    if (!isReady) {
      return (
        <AppLoading
          startAsync={waitForInit}
          onFinish={() => setIsReady(true)}
          onError={console.error}
        />
      );
    }
  
    return (
      // 你的应用根组件
    );
  }
  

2. 调整可疑依赖的初始化时机

问题依赖可能在UIManager就绪前就执行了UI相关操作：

• 将依赖初始化移到组件挂载后，用useEffect钩子：

  useEffect(() => {
    // 初始化需要UIManager的依赖
    initProblematicLib();
  }, []);
  

• 避免在index.js入口同步调用依赖的初始化方法

3. 配置Expo提前加载UIManager模块

在app.config.js或app.json中添加Android配置，确保UIManager优先初始化：

{
  "expo": {
    "android": {
      "extraPackages": ["com.facebook.react.uimanager.UIManagerModule"]
    }
  }
}

4. 清除缓存重建项目

缓存异常可能导致初始化顺序错乱，执行以下命令：

# 清除Expo开发缓存并重启
expo r -c
# 清除Android构建缓存
expo build:android --clear-cache
# 清除iOS构建缓存
expo build:ios --clear-cache

验证 #

完成上述操作后，测试应用首次启动是否正常，重新构建TestFlight版本验证问题是否解决。

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