【2020 React-Native 系列】之 react-native-splash-screen

环境

• 撰写时间：2020-08-03
• React Native 版本 ：0.63.2
• Xcode 版本：Version 11.6 (11E708)

在 RN 中，添加启动图是非常方便的，我们可以使用 react-native-splash-screen 来完成此工作

react-native-splash-screen 插件也有点老了，官方文档及其他教程都有一些问题，这里更新一下最新的安装过程

Install

yarn add react-native-splash-screen

ios 安装

其实只需要执行一行命令就行，会自动帮我们添加依赖包，所以官网的添加各种文件就不需要了

cd ios && pod install

等待 pod install 执行结束，由于后面 iOS 默认启动页是 LaunchScreen.storyboard，我们需要设置一下

1. 清空 Launch Screen File

2. 添加 LaunchImage

添加后，把 UI 给你的各种不同的分辨率图片往里面拖就行

3. 修改 Build Settings

搜索框搜索 Launch Image，快速定位，双击修改为 LaunchImage

4.修改 AppDelegate.m

在 AppDelegate.m 中的头部 #import "RNSplashScreen.h"

修改 AppDelegate.m 中的 didFinishLaunchingWithOptions 方法，在最后添加

[RNSplashScreen show];

iOS 配置结束

Android 配置

安卓也不需要添加各种包，重新 gradle sync 一下就行

1. 修改 MainActivity

路径：android/app/src/main/java/com/wendada/MainActivity.java

package com.wendada;

import com.facebook.react.ReactActivity;

# 添加下面两行
import org.devio.rn.splashscreen.SplashScreen;
import android.os.Bundle;

public class MainActivity extends ReactActivity {

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "wendada";
  }

  // 添加下面方法
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      SplashScreen.show(this);  // here
      super.onCreate(savedInstanceState);
  }
}

2. 修改 styles.xml

路径 android/app/src/main/res/values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
        <!--添加这一行-->
        <item name="android:windowIsTranslucent">true</item>
    </style>

</resources>

3. 添加 launch_screen.xml

路径 android/app/src/main/res/layout/launch_screen.xml

添加如下内容

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="@drawable/launch_screen"
              android:orientation="vertical">
</LinearLayout>

4. 存放图片

把图片存放至 android/app/src/main/res/drawable/launch_screen.png

前端配置

在 App.js 中导入

import SplashScreen from 'react-native-splash-screen';

添加关闭启动图代码

componentDidMount() {
        SplashScreen.hide();
        console.log('js 关闭启动图');
    }

结束

愉快的玩耍吧