啟動屏配置
npm i react-native-splash-screen --save
獲取圖標(biāo)
1.進(jìn)入https://icon.wuruihong.com/#圖標(biāo)工廠，讓ui切一張1024x1024的圖標(biāo)圖片
IOS端
1.打開AppDelegate.m文件，根據(jù)下面代碼配置
#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNSplashScreen.h"? // 添加此行
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
? ? // ...other code
? ? [RNSplashScreen show];? // 添加此行
? ? // or
? ? //[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView];
? ? return YES;
}
@end
2.在項(xiàng)目根目錄下執(zhí)行命令行cd ios && pod install
3.將解壓后的圖標(biāo)文件夾ios文件打開，復(fù)制粘貼，替換項(xiàng)目所在文件的ios/xxxx(項(xiàng)目名)/Images.xcassets下的圖標(biāo)文件
LaunchScreen.storyboard
1.使用xcode打開項(xiàng)目,點(diǎn)擊項(xiàng)目下的LaunchScreen.storyboard,刪除所有l(wèi)abel元素,點(diǎn)擊xcode右上角 + 號,搜索image添加Image View
2.將Image View長寬拉伸至整個屏幕，設(shè)置右下角的constraints上下左右為10,設(shè)置content mode為 Aspect fill
3.編輯Image View的constraints全部為0,編輯如下圖所示的Horizontal和Vertical
4.點(diǎn)擊左邊文件夾Images.xcassets,點(diǎn)擊 xcode下面 + 號, 添加New Image Set,將啟動圖片放至新建的image中，點(diǎn)擊LaunchScreen.storyboard中Image View，設(shè)置圖片為新建的image
設(shè)置圖片
Android端
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 {
? ? ...
? ? compile project(':react-native-splash-screen')
}
3.打開 MainApplication.java文件進(jìn)行配置:
.
...
import org.devio.rn.splashscreen.SplashScreen;
protected void onCreate(Bundle savedInstanceState) {
? ? SplashScreen.show(this);? // 啟動屏展示,添加此行代碼
? ? super.onCreate(null);
}
4.創(chuàng)建文件夾及文件，按照下圖配置
替換圖標(biāo)
1.將解壓后的圖標(biāo)文件夾android文件打開，復(fù)制粘貼，替換項(xiàng)目所在文件的android/app/src/main//res下的圖標(biāo)文件
2.splash_img.png為背景圖片,目前為750x1334，可自適應(yīng)拉伸
添加或修改下列文件
/res/drawable/background_splash.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
? ? <item
? ? ? ? android:drawable="@color/white"/>
? ? <item
? ? ? ? android:width="100dp"
? ? ? ? android:height="100dp"
? ? ? ? android:drawable="@mipmap/ic_launcher"
? ? ? ? android:gravity="center" />
</layer-list>
/res/layout/launch_screen.xml
<?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="@color/white"
? ? android:gravity="center">
? ? <ImageView
? ? ? ? android:layout_width="match_parent"
? ? ? ? android:layout_height="match_parent"
? ? ? ? android:src="@drawable/splash_img"
? ? ? ? android:scaleType="fitXY"
? ? />
</LinearLayout>
/res/AndroidManifest.xml
<application
? ? ? android:name=".MainApplication"
? ? ? android:label="@string/app_name"
? ? ? android:icon="@mipmap/ic_launcher"
? ? ? android:roundIcon="@mipmap/ic_launcher" // 修改此行
? ? ? android:allowBackup="false"
? ? ? android:theme="@style/AppTheme">
/res/values/color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
? ? <color name="white">#ffffff</color>
? ? <color name="font1">#475669</color>
? ? <color name="primary_dark">#4F6D7A</color>
</resources>
/res/values/styles.xml
<resources>
? ? <!-- Base application theme. -->
? ? <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
? ? ? ? <!-- Customize your theme here. -->
? ? ? ? <item name="android:statusBarColor">@color/white</item>
? ? </style>
? ? <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
? ? ? ? <item name="android:windowBackground">@drawable/background_splash</item>
? ? ? ? <item name="android:statusBarColor">@color/white</item>
? ? </style>
</resources>
————————————————
版權(quán)聲明：本文為CSDN博主「awaitfly」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_43947842/article/details/119945216
