React Native 使用useEffect启动的启动页插件

前言

启动页可谓是手机App上很重要的一部分了，目前RN的App启动页插件大部分都是react-native-splash-screen，这个插件确实很不错，但是也是有一些问题存在的，首先这个插件会存在跳屏时白屏的问题，再有就是它的issue区存在不少问题，而且好久没有任何更新了，相比起来，react-native-bootsplash我觉得做的就很好。

安装配置

之所以选择这个插件的原因就是根据文档配置时没有遇到任何错误，因为文档写的确实太详细了，连我这个从来没接触过Android开发，甚至连xml是什么都不知道的人没有遇到任何错误，这里用中文介绍一下配置流程。

安装:

yarn add react-native-bootsplash

首先在 android/app/src/main/res/drawable 目录下创建一个bootsplash.xml 文件，没有的话就创建一个drawable目录，内容如下：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
  
  <item android:drawable="@android:color/white" />

  <item>
    
    <bitmap
      android:src="@drawable/ic_launcher"
      android:gravity="center" />
  item>
layer-list>

这里可以配置启动页背景和图标，IOS的图标我不太不熟悉，安卓的话，通过这个网站生成，然后会得到压缩包，解压后会有ios和android的图标，我们把android的文件夹覆盖到android\app\src\main\res下，覆盖之前的默认图片，随后把想要的启动图放在‘drawable’文件夹下，命名如代码所示即可。

然后修改android/app/src/main/java/com/yourprojectname/MainActivity.java的文件：

import android.os.Bundle; // 添加

import com.facebook.react.ReactActivity;
import com.zoontek.rnbootsplash.RNBootSplash; // 添加

public class MainActivity extends ReactActivity {
     

  // …

//添加
  @Override
  protected void onCreate(Bundle savedInstanceState) {
     
    super.onCreate(savedInstanceState);
    RNBootSplash.show(R.drawable.bootsplash, MainActivity.this); // <- display the "bootsplash" xml view over our MainActivity
  }

接着要修改android/app/src/main/res/values/styles.xml文件：

<resources>

  
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    
  style>

  
  
  <style name="BootTheme" parent="AppTheme">
    
    "android:background">@drawable/bootsplash
  style>

resources>

最后修改android/app/src/main/AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.rnbootsplashexample">

  

  <application
    android:name=".MainApplication"
    android:label="@string/app_name"
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:allowBackup="false"
    android:theme="@style/AppTheme">

    <activity
      android:name=".MainActivity"
      android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
      android:label="@string/app_name"
      android:windowSoftInputMode="adjustResize"
      android:exported="true">
      
    activity>

    
    <activity
      android:name="com.zoontek.rnbootsplash.RNBootSplashActivity"
      android:theme="@style/BootTheme"> 
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      intent-filter>
    activity>

    
  application>

manifest>

使用

使用也很简单，直接在useEffect中使用即可：

import RNBootSplash from 'react-native-bootsplash';

const App = () => {
     
  useEffect(() => {
     
      RNBootSplash.hide({
     duration: 250});
    }, []);
  ...
}