乐趣区

关于react-native:2020-ReactNative-系列之-reactnativesplashscreen

jiezi

环境

  • 撰写工夫：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 敞开启动图');
    }

完结

欢快的游玩吧

退出移动版