启动屏配置
npm i react-native-splash-screen --save
获取图标
1.进入https://icon.wuruihong.com/#图标工厂，让ui切一张1024x1024的图标图片
IOS端
1.打开AppDelegate.m文件，根据下面代码配置
#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.在项目根目录下执行命令行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
<?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>
————————————————
版权声明：本文为CSDN博主「awaitfly」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43947842/article/details/119945216
网友评论