react-native设置启动页

最新推荐文章于 2024-08-05 21:44:36 发布

温柔如你，生活如梦

最新推荐文章于 2024-08-05 21:44:36 发布

阅读量1k

点赞数

分类专栏： react-native踩坑记录文章标签： react native react.js 前端 javascript

本文链接：https://blog.csdn.net/qq_53761321/article/details/131142457

版权

react-native踩坑记录专栏收录该内容

19 篇文章 0 订阅

订阅专栏

设置启动页

React Native 设置APP图标, ICON, 启动屏 - 掘金 (juejin.cn)ios不可参考

首先需要安装插件

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

配置android

在app.js中添加以下代码，用于隐藏启动屏幕

import SplashScreen from 'react-native-splash-screen';
useEffect(() => {
  // 隐藏
  SplashScreen.hide();
}, [])

修改文件android/app/src/main/java/com/项目名称/MainActivity.java


import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
// react-native-splash-screen版本 >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here
// react-native-splash-screen版本 < 0.3.1
import com.cboy.rn.splashscreen.SplashScreen; // here

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        // 第二个参数可以设置为true使背景图占满导航栏
        SplashScreen.show(this, true);  // here
        super.onCreate(savedInstanceState);
    }
    // ...other code
}

在这里插入图片描述

添加启动图片android/app/src/mian/res/drawable-*
1. 文件名drawable-hdpi 、drawable-ldpi、drawable-mdpi、drawable-xhdpi、drawable-xxhdpi、drawable-xxxhdpi对应的图片尺寸
```
MDPI is 320x480 dp = 320x480px (1x)
LDPI is 0.75 x MDPI = 240x360px
HDPI is 1.5 x MDPI = 480x720px
XHDPI is 2 x MDPI = 640x960px
XXHDPI is 3 x MDPI = 960x1440px
XXXHDPI is 4 x MDPI = 1280x1920px
```
2. 这些文件名是对应不同屏幕使用的不同文件夹下的图片名称的图片，这些文件夹下的图片名称都为launch_screen

在 android/app/src/mian/res目录下创建layout文件夹，并在创建的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="@drawable/launch_screen">
</LinearLayout>

启动时白屏处理添加这条

在这里插入图片描述

配置ios

首先需要在文件中添加代码

#import "RNSplashScreen.h"
// 这个是处理0.71没有效果，不会关闭启动屏
bool didFinish=[super application:application didFinishLaunchingWithOptions:launchOptions];
// 开启启动屏
[RNSplashScreen show];

在这里插入图片描述