React Native集成react-native-bootsplash后启动屏崩溃问题

问题场景 #

开发React Native应用时，为实现启动屏安装了react-native-bootsplash包，按配置完成Android端设置后应用崩溃，报错信息如下：

at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2066)
        at android.os.Handler.dispatchMessage(Handler.java:106)
        at android.os.Looper.loop(Looper.java:223)
        at android.app.ActivityThread.main(ActivityThread.java:7656)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:947)
     Caused by: android.view.InflateException: Binary XML file line #28 in com.myreactapp:layout/splash_screen_view: Failed to resolve attribute at index 0: TypedValue{t=0x2/d=0x7f030208 a=-1}
     Caused by: java.lang.UnsupportedOperationException: Failed to resolve attribute at index 0: TypedValue{t=0x2/d=0x7f030208 a=-1}
        at android.content.res.TypedArray.getLayoutDimension(TypedArray.java:826)
        at android.view.ViewGroup$LayoutParams.setBaseAttributes(ViewGroup.java:8231)
        at android.view.ViewGroup$MarginLayoutParams.<init>(ViewGroup.java:8429)
        at android.widget.FrameLayout$LayoutParams.<init>(FrameLayout.java:452)

相关配置文件 #

styles.xml #

<resources>
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:textColor">@android:color/black</item>
    <item name="android:editTextStyle">@style/ResetEditText</item>
    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
  </style>
  <style name="ResetEditText" parent="@android:style/Widget.EditText">
    <item name="android:padding">0dp</item>
    <item name="android:textColorHint">#c8c8c8</item>
    <item name="android:textColor">@android:color/black</item>
  </style>
  <style name="Theme.App.SplashScreen" parent="AppTheme">
    <item name="android:windowBackground">@drawable/splashscreen</item>
  </style>
  <style name="BootTheme" parent="Theme.SplashScreen">
    <item name="windowSplashScreenBackground">@color/bootsplash_background</item>
    <item name="windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo</item>
    <item name="postSplashScreenTheme">@style/AppTheme</item>
  </style>
</resources>

MainActivity.java #

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.zoontek.rnbootsplash.RNBootSplash; // for splash screen

import expo.modules.ReactActivityDelegateWrapper;

public class MainActivity extends ReactActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    // Set the theme to AppTheme BEFORE onCreate to support 
    // coloring the background, status bar, and navigation bar.
    // This is required for expo-splash-screen.
    setTheme(R.style.AppTheme);
    RNBootSplash.init(this);
    super.onCreate(null);
  }
}

colors.xml #

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<resources>
  <color name="splashscreen_background">#FFFFFF</color>
  <color name="bootsplash_background">#FFFFFF</color>
</resources>

问题根源与解决方法 #

问题核心是expo-splash-screen模块与react-native-bootsplash存在冲突。

解决步骤：

• 移除所有与expo-splash-screen相关的代码引用：
  • 删除styles.xml中Theme.App.SplashScreen这类expo启动屏主题配置
  • 移除MainActivity.java中的import expo.modules.ReactActivityDelegateWrapper;导入语句，以及注释中提及expo-splash-screen的内容
  • 删除AndroidManifest.xml内与expo-splash-screen相关的配置项

完成上述操作后，Android端应用即可恢复正常运行。

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