之前一直使用的是這個插件
react-native-splash-screen
RN0.59前使用還是可以的,問題不是很多.
RN0.60之后貌似有些東西改變了,造成閃白情況.
蘋果公司也提醒了開發者,2020年4月 棄用LaunchImage
改用 LaunchScreen.storyboard 加載啟動圖.
還有個問題就是 安卓啟動圖無法全屏,安卓的statusbar 會多出來一塊無法全屏.

下面就來寫一下個人的處理和解決方案.
首先,iOS
不墨跡了 直接上圖吧

iOS先創建一個launch screen 文件

image.png

image.png

先把這2個RN 的東西都刪除調

你應該已經有了 UI給你的圖片
先添加Imageview

image.png

拖動邊緣把適配做好(這里不懂得小伙伴可以看看iOS原生)

image.png

設置圖片的的 Content Mode 為 Aspect Fill

image.png

在 Assets.xcassets 中 New Image Set

image.png

把圖片放進來,
這里我鎖邊找張圖代替

image.png

大概就是這個樣子 會報黃色警告

進入圖片文件夾中，編輯 Contents.json，把里面的內容改成如下內容：

image.png

打開contents.json 文件編輯
把對應的編號都放進去

{
  "images" : [
    {
      "idiom" : "iphone",
      "filename" : "iphone1.jpg",
      "scale" : "1x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iphone4.jpg",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "subtype" : "retina4",
      "scale" : "1x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iphone5s.jpg",
      "subtype" : "retina4",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "subtype" : "retina4",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iphone8p.jpg",
      "subtype" : "736h",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iphone8.jpg",
      "subtype" : "667h",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iphonex.jpg",
      "subtype" : "2436h",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iphonexsmax.jpg",
      "subtype" : "2688h",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iphonexr.jpg",
      "subtype" : "1792h",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone5s.jpg",
      "subtype" : "retina4",
      "scale" : "2x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

最后變成了這樣

image.png

添加圖片

image.png

到這里 iOS就結束了,用了自己帶的約束文件來做的適配.的確方便很多

下面是安卓
安卓呢我們就要使用一個第三方來做這個東西了,
以前的react-native-splash-screen不維護了,再介紹個新的給小伙伴

現在推薦一款一直在維護的 react-native-bootsplash

老規矩

android

yarn add react-native-bootsplash

這里我手動添加,如果使用link 可能對現有項目造成問題,小白的話建議繼續看下去
android/settings.gradle 添加

include ':react-native-bootsplash'
project(':react-native-bootsplash').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-bootsplash/android')

android/app/build.gradle 添加

dependencies {
  // ...
  implementation project(':react-native-bootsplash')
}

MainApplication.java添加

import com.zoontek.rnbootsplash.RNBootSplashPackage; // <- add the RNBootSplashPackage import

public class MainApplication extends Application implements ReactApplication {

  // …

  @Override
  protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // …
    packages.add(new RNBootSplashPackage());
    return packages;
  }

  // …
}

value/string.xml 添加

<resources>

    <!-- Base application theme -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Your base theme customization -->
        <!--        <item name="android:statusBarColor">@color/catalyst_redbox_background</item>-->
        <!--        <item name="android:windowTranslucentStatus">false</item>-->
        <!--        <item name="android:windowTranslucentStatus">true</item>-->

    </style>

    <!-- Add the following lines -->
    <!-- BootTheme should inherit from AppTheme -->
    <style name="BootTheme" parent="AppTheme">
        <!-- set the generated bootsplash.xml drawable as activity background -->
        <item name="android:background">@drawable/launch</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowTranslucentStatus">true</item>
        <!--        <item name="android:windowDrawsSystemBarBackgrounds">true</item>-->
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>

</resources>

androidManifest.xm

<activity
            android:name="com.zoontek.rnbootsplash.RNBootSplashActivity"
            android:theme="@style/BootTheme"> <!-- apply the theme you created at step 3. -->
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

MainActivity 添加

@Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
//添加這里
    RNBootSplash.init(R.drawable.launch, MainActivity.this);

    if (Build.VERSION.SDK_INT >= 21) {
      View decorView = getWindow().getDecorView();
      int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
              | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
      decorView.setSystemUiVisibility(option);
      getWindow().setStatusBarColor(Color.TRANSPARENT);
    }

ios

ios/Podfile 
target 'YourAwesomeProject' do
  # …
  pod 'RNBootSplash', :path => '../node_modules/react-native-bootsplash'
end

到此為止就解決了 安卓啟動圖全屏問題.
iOS 就使用它自己的 storyboard 來啟動.