一、背景

在我們使用react-native進(jìn)行編寫(xiě)代碼的時(shí)候，當(dāng)啟動(dòng)應(yīng)用的時(shí)候，我們會(huì)看到如下界面

然而，這樣的啟動(dòng)界面是非常的不又好，那么我們?cè)撛趺催M(jìn)行處理啟動(dòng)界面呢？有如下兩種方案

二、方案

1.使用第三方庫(kù)(react-native-splash-screen)2.ios系統(tǒng)設(shè)置（僅適用ios系統(tǒng)，在這里不做講解）

三、具體實(shí)現(xiàn)方式

一).react-native-splash-screen

1.安裝

npm i react-native-splash-screen --save

2.鏈接到底層代碼

1.自動(dòng)配置鏈接

react-native link react-native-splash-screen

or

rnpm link react-native-splash-screen

2.手動(dòng)配置鏈接 Android手動(dòng)配置:

（1）在android/settings.gradle文件中添加如下代碼：

include ’:react-native-splash-screen’project(’:react-native-splash-screen’).projectDir = new File(rootProject.projectDir, ’../node_modules/react-native-splash-screen/android’)

（2） 在android/app/build.gradle文件中,dependencies對(duì)象內(nèi)添加如下代碼：

dependencies { ... compile project(’:react-native-splash-screen’) ... }

（3）在 MainApplication.java文件中添加如下代碼：

import org.devio.rn.splashscreen.SplashScreenReactPackage; ... @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new SplashScreenReactPackage(), // 添加啟動(dòng)頁(yè)代碼 ); }

以上就是android系統(tǒng)中鏈接的方式，下面是ios底層鏈接的方式 ios手動(dòng)配置： （1）在 XCode中, 點(diǎn)擊項(xiàng)目，打開(kāi)展開(kāi)項(xiàng)目右鍵點(diǎn)擊 Libraries ➜ Add Files to [your project’s name],選中路徑 node_modules ➜ react-native-splash-screen and add SplashScreen.xcodeproj添加SplashScreen.xcodeproj項(xiàng)目文件

（2）在 XCode中, 點(diǎn)擊項(xiàng)目，打開(kāi)展開(kāi)項(xiàng)目, 選中你的項(xiàng)目. 添加 libSplashScreen.a 到你的項(xiàng)目的 Build Phases ➜ Link Binary With Libraries中，界面如下所示：

（3）修復(fù) ’SplashScreen.h’ file not found, 選擇你的項(xiàng)目 → Build Settings → Search Paths → Header Search Paths to add:

$(SRCROOT)/../node_modules/react-native-splash-screen/ios

界面如下所示：

以上就是ios系統(tǒng)的配置鏈接的方法，下面就讓我們來(lái)看看具體在代碼中的使用

3.進(jìn)行使用

（1）在MainActivity.java文件中添加如下代碼：

import android.os.Bundle; // here import com.facebook.react.ReactActivity; import org.devio.rn.splashscreen.SplashScreen; // 啟動(dòng)頁(yè)設(shè)置添加代碼 public class MainActivity extends ReactActivity { /** * 設(shè)置啟動(dòng)頁(yè) */ @Override protected void onCreate(Bundle savedInstanceState) { SplashScreen.show(this); // 展示啟動(dòng)頁(yè)設(shè)置代碼 super.onCreate(savedInstanceState); } // ...other code }

（2）添加啟動(dòng)頁(yè)圖片及布局 在路徑app/src/main/res/layout創(chuàng)建文件(如果不存在則進(jìn)行手動(dòng)創(chuàng)建)命名為 launch_screen.xml. 然后輸入下面內(nèi)容：

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

（3）在res文件夾下面創(chuàng)建如下文件夾，添加對(duì)應(yīng)分辨率圖片，分別對(duì)應(yīng)放入下面文件夾,圖片命名和xml中一致，命名為launch_screen

drawable-ldpi drawable-mdpi drawable-hdpi drawable-xhdpi drawable-xxhdpi drawable-xxxhdpi

到這里，我們已經(jīng)能夠在界面中能夠看到啟動(dòng)頁(yè)的加載了，但是為了能有更好的效果，我們繼續(xù)往下看,在文件夾app/src/main/res/values/colors.xml中添加一個(gè)顏色命名為status_bar_color ,其中status_bar_color為狀態(tài)欄顏色設(shè)置，代碼如下所示：

<?xml version='1.0' encoding='utf-8'?> <resources> <color name='status_bar_color'>#FF0000</color> </resources>

同時(shí)我們能夠在啟動(dòng)的過(guò)程中看到有白屏出現(xiàn)，我們將啟動(dòng)背景設(shè)置成透明背景，使用下面方式進(jìn)行處理， 打開(kāi)android/app/src/main/res/values/styles.xml文件，并且添加 <item name='android:windowIsTranslucent'>true</item> 到文件中，添加之后結(jié)果如下所示:

<resources> <!-- Base application theme. --> <style name='AppTheme' parent='Theme.AppCompat.Light.NoActionBar'> <!-- Customize your theme here. --> <!--設(shè)置透明背景--> <item name='android:windowIsTranslucent'>true</item> </style> </resources>

當(dāng)然，你也可以使用自定義的啟動(dòng)顏色，如下面所示：

在路徑android/app/src/main/res/values/colors.xml文件添加如下代碼用于設(shè)置狀態(tài)欄

<?xml version='1.0' encoding='utf-8'?><resources> <color name='status_bar_color'><!-- Colour of your status bar here --></color></resources>

在路徑android/app/src/main/res/values/styles.xml中添加自定義樣式，代碼如下所示:

<?xml version='1.0' encoding='utf-8'?><resources> <style name='SplashScreenTheme' parent='SplashScreen_SplashTheme'> <item name='colorPrimaryDark'>@color/status_bar_color</item> </style></resources>

然后修改啟動(dòng)頁(yè)展示的樣式選擇就可以了:

SplashScreen.show(this, R.style.SplashScreenTheme);

效果如下所示,我們能夠看到頂部紅色的狀態(tài)欄：

[ios_lanch_screen_custom.gif]

更新AppDelegate.m文件如下所示代碼：

#import 'AppDelegate.h'#import <React/RCTBundleURLProvider.h>#import <React/RCTRootView.h>#import <React/RCTRootView.h>#import 'RNSplashScreen.h' // 導(dǎo)入啟動(dòng)頁(yè)組件庫(kù)@implementation AppDelegate- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{ NSURL *jsCodeLocation; jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@'index' fallbackResource:nil]; RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@'LoveYouDeeply' initialProperties:nil launchOptions:launchOptions]; rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; UIViewController *rootViewController = [UIViewController new]; rootViewController.view = rootView; self.window.rootViewController = rootViewController; [self.window makeKeyAndVisible]; [RNSplashScreen show]; // 添加啟動(dòng)頁(yè)展示 return YES;}@end

然后通過(guò)LaunchImage or LaunchScreen.xib自定義啟動(dòng)頁(yè),其具體過(guò)程如下所示， 1、用Xcode打開(kāi)ios工程，找到Image.xcassets并點(diǎn)擊選中，在空白處選擇 App Icons & Launch Images ➜ New ios Launch Image , 完成這步后會(huì)生成一個(gè)LaunchImage，操作界面如下所示：

2、選中Image.xcassets ➜ LaunchImage，就是上一步創(chuàng)建的LaunchImage，右側(cè)框中的部分是讓你選擇要支持的系統(tǒng)，橫豎屏之類(lèi)的（這個(gè)按照需求選擇，如果你的項(xiàng)目不打算支持ios6可以不選擇）。然后點(diǎn)擊中間部分選中一個(gè)分辨率的框，上傳相應(yīng)分辨率的圖片作為啟動(dòng)屏幕

以下是選擇框中不同屏幕的分辨率,按照下面給出的像素進(jìn)行制作特定大小的圖片添加即可：

iPhone Portrait iOS 8-Retina HD 5.5 （1242×2208） @3xiPhone Portrait iOS 8-Retina HD 5.5 （1242×2208） @3xiPhone Portrait iOS 8-Retina HD 4.7 （750×1334） @2xiPhone Portrait iOS 7,8-2x （640×960） @2xiPhone Portrait iOS 7,8-Retina 4 （640×1136） @2xiPhone Portrait iOS 5,6-1x （320×480） @1xiPhone Portrait iOS 5,6-2x （640×960） @2xiPhone Portrait iOS 5,6-Retina4 （640×1136） @2x

3、選中LaunchScreen.xib,會(huì)有個(gè)彈出框，默認(rèn)選擇確定就行，然后把右邊的 Use Launch Screen 取消選中（因?yàn)閕os可以用來(lái)自定義圖片啟動(dòng)屏幕或通過(guò) LaunchScreen.xib啟動(dòng)屏幕，ios默認(rèn)s設(shè)置，我們?cè)谶@里取消掉默認(rèn)設(shè)置的）。 界面如下所示：

4、如圖選中項(xiàng)目工程，右側(cè)會(huì)出現(xiàn)工程的基本配置，設(shè)置Launch Images Srouce配置為L(zhǎng)aunchImage（如果沒(méi)有LaunchImage會(huì)彈出一個(gè)框提示拷貝圖片，按照默認(rèn)點(diǎn)確定就行），然后設(shè)置Launch Screen File為空（這個(gè)很重要）。

現(xiàn)在，我們所有的準(zhǔn)備工作都已經(jīng)完成，下面就是在js代碼中的使用，在React-Native代碼中進(jìn)行隱藏啟動(dòng)頁(yè)， 當(dāng)我們準(zhǔn)備好js代碼之后，我們就可以將我們的啟動(dòng)頁(yè)進(jìn)行隱藏掉，其中隱藏啟動(dòng)頁(yè)的代碼如下所思：

import React, { Component } from ’react’;import SplashScreen from ’react-native-splash-screen’;import Router from ’./src/routerManager’;export default class App extends Component { constructor(props) { super(props); // do anything while splash screen keeps, use await to wait for an async task. // 在入口文件處隱藏掉啟動(dòng)頁(yè) SplashScreen.hide(); // 關(guān)閉啟動(dòng)屏幕 } render() { return ( <Router {...this.props} /> ); }}

在ios系統(tǒng)配置中，

四、效果展示

Android：

以上就是啟動(dòng)頁(yè)的設(shè)置解決方案

到此這篇關(guān)于android中使用react-native設(shè)置應(yīng)用啟動(dòng)頁(yè)過(guò)程詳解的文章就介紹到這了,更多相關(guān)android react-native設(shè)置應(yīng)用啟動(dòng)頁(yè)內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！