启动屏配置
npm i react-native-splash-screen --save
获取图标
1.进入https://icon.wuruihong.com/#图标工厂，让ui切一张1024x1024的图标图片
IOS端
1.打开AppDelegate.m文件，根据下面代码配置
#import "AppDelegate.h"
#import
#import
#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.在项目根目录下执行命令行cd ios && pod install
3.将解压后的图标文件夹ios文件打开，复制粘贴，替换项目所在文件的ios/xxxx(项目名)/Images.xcassets下的图标文件
LaunchScreen.storyboard
1.使用xcode打开项目,点击项目下的LaunchScreen.storyboard,删除所有label元素,点击xcode右上角 + 号,搜索image添加Image View
2.将Image View长宽拉伸至整个屏幕，设置右下角的constraints上下左右为10,设置content mode为 Aspect fill
3.编辑Image View的constraints全部为0,编辑如下图所示的Horizontal和Vertical
4.点击左边文件夹Images.xcassets,点击 xcode下面 + 号, 添加New Image Set,将启动图片放至新建的image中，点击LaunchScreen.storyboard中Image View，设置图片为新建的image
设置图片
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文件进行配置:
.
...
import org.devio.rn.splashscreen.SplashScreen;
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this); // 启动屏展示,添加此行代码
super.onCreate(null);
}
4.创建文件夹及文件，按照下图配置
替换图标
1.将解压后的图标文件夹android文件打开，复制粘贴，替换项目所在文件的android/app/src/main//res下的图标文件
2.splash_img.png为背景图片,目前为750x1334，可自适应拉伸
添加或修改下列文件
/res/drawable/background_splash.xml
android:drawable="@color/white"/> android:width="100dp" android:height="100dp" android:drawable="@mipmap/ic_launcher" android:gravity="center" /> /res/layout/launch_screen.xml android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" android:gravity="center"> android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/splash_img" android:scaleType="fitXY" /> /res/AndroidManifest.xml 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 /res/values/styles.xml ———————————————— 版权声明：本文为CSDN博主「awaitfly」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/weixin_43947842/article/details/119945216