React Native 啓動頁（閃屏頁）好用的第三方庫 rn-splash-screen

使用React Native 開發App，確實需要踩很多坑。移動開發中基本上每個App都會有啓動頁，使用原生的iOS/Android來實現該功能很簡單，但我本職是iOS開發，對於Android原生不是很瞭解（這一點我相信很多人跟我一樣），所以要同時適用於兩個平臺，可能就得使用第三方庫了。這裏給大家推薦的閃屏庫是 rn-splash-screen ，雖然該庫在github上的star並不是最多的，但確實比star更多react-native-splash-screen要好用，後者我也嘗試過，一個字“坑”（可能跟我的react-native 版本有關吧，我的版本是0.50.1）。

第一步

命令行cd 到項目，然後執行：

1.  npm install --save rn-splash-screen   （注：將rn-splash-screen庫安裝到項目的node_modules中）

2. react-native link rn-splash-screen      （注：自動將使用rn-splash-screen庫的一些設置配置到iOS/Android的工程配置文件中）

第二步

Android的配置：

（1）在項目android/app/src/main/res/ 路徑下創建一個名稱爲drawable的文件夾，並在該文件夾下放置一個名稱爲splash的png格式的圖片（這個就是用於閃屏的圖片，名稱也可自己起，只要後面的配置也跟着變就行）。圖片建議使用.9.png格式的，並配置針對多種屏幕像素的尺寸。參考http://stackoverflow.com/a/34726279

（2）在android/app/src/main/res/values/路徑下的styles.xml文件中加入配置：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/splash</item>
</style>

（3）在/android/app/src/main/路徑下的AndroidManifest.xml文件中做如下修改：

<application
      android:name="xxx.MainApplication" //這個xxx跟具體的app的包名有關
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
  -   android:theme="@style/AppTheme"      //前面的減號表示要刪除（如果原來有的話）
  +   android:icon="@mipmap/ic_launcher"   //前面的加號表示要添加（如果原來沒有的話）
      >
      <activity
        android:name="com.skyocean.youjoylife.MainActivity" 
        android:label="@string/app_name"
  +     android:theme="@style/AppTheme"   //前面的加號表示要添加（如果原來沒有的話）
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"> 
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>

注意：只需要改上面代碼中前面帶“+”“-”號的這幾行，別改錯了，不然後面在調用 SplashScreen.hide() 會報錯。

（4）在android/app/src/main/java/com/__APPNAMES__/路徑下的MainActivity.java中做如下修改：

// [...]
import android.graphics.Color;
import android.os.Bundle;

import com.facebook.react.ReactInstanceManager;          //**********需要添加的************
import com.facebook.react.bridge.ReactContext;           //**********需要添加的************
import com.mehcode.reactnative.splashscreen.SplashScreen;//**********需要添加的************

public class MainActivity extends ReactActivity {
  // [...]

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      // Show the js-controlled splash screen
      SplashScreen.show(this, getReactInstanceManager());  //**********需要添加的************

      super.onCreate(savedInstanceState);

      // [...]
  }

  // [...]
}

iOS的配置：

 （1）刪除iOS工程文件夾下的 LaunchScreen.xib 文件

（2）在iOS工程的Images.xcassets中添加LaunchImage（在Xcode中打開 Images.xcassets ），按如下步驟操作

（3）最終的LaunchImage是這樣的：

（4）然後iOS工程中配置一下，步驟如下：

（5）進入iOS工程的AppDelegate.m中做如下修改：

// [...]
#import <RCTSplashScreen/RCTSplashScreen.h>   //**********先導入頭文件************

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // [...]
 
  RCTRootView *rootView = // [...]
  
  // Show splash screen (rn-splash-screen)
  [RCTSplashScreen show:rootView]; //**********添加這行代碼，注意：這行代碼必須在 RCTRootView *rootView = // [...] 的下面************

  // [...]
}

至此，我們運行React Native 工程在iOS/Android設備或模擬器上就能看到閃屏頁了。

最後，我們還要在React Native 中手動關閉閃屏頁（一般在App的界面的入口代碼中添加關閉閃屏頁的代碼）：

import SplashScreen from "rn-splash-screen";

// Hide the active splash screen
SplashScreen.hide();

你也可以給閃屏頁加個延時：

componentDidMount(){
        //隱藏閃屏頁,閃屏頁用的是第三方庫，rn-splash-screen
        setTimeout(() => {
            SplashScreen.hide();
        }, 2000);//延時2秒消失

放在componentDidMount方法中可以讓app的界面先加載出來，避免出現白屏閃一下的問題。