RN安卓ios启动白屏(statusbar空白)和启动图全屏和ios LaunchScreen.storyboard新规

之前一直使用的是这个插件
react-native-splash-screen
RN0.59前使用还是可以的,问题不是很多.
RN0.60之后貌似有些东西改变了,造成闪白情况.
苹果公司也提醒了开发者,2020年4月弃用LaunchImage
改用 LaunchScreen.storyboard 加载启动图.
还有个问题就是安卓启动图无法全屏,安卓的statusbar 会多出来一块无法全屏.

下面就来写一下个人的处理和解决方案.
首先,iOS
不墨迹了直接上图吧

iOS先创建一个launch screen 文件

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 来启动.