react native 设置启动页 安卓app开发

1.安装

yarn add react-native-splash-screen

2.找到目录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')

3.找到目录android/app/build.gradle添加如下代码

...
dependencies {
    ...
    implementation project(':react-native-splash-screen') //添加这个代码
}

4.在android目录下找到 MainApplication.java文件添加如下代码

package com.smartparkplatform;

//启动页添加
import android.os.Bundle;  //添加这个代码
import org.devio.rn.splashscreen.SplashScreen; //添加这个代码

public class MainActivity extends ReactActivity {
  .......
  //添加下面代码
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      SplashScreen.show(this);
      super.onCreate(savedInstanceState);
  }
  .......
}

5.在app/src/main/res/layout目录下创建launch_screen.xml文件并添加如下代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical" android:layout_width="match_parent"
  android:layout_height="match_parent">
  <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>

6.创建下面的文件夹并且添加不同尺寸的图片

文件夹：drawable-ldpi     图片尺寸：200*320
文件夹：drawable-mdpi     图片尺寸：320*480
文件夹：drawable-hdpi     图片尺寸：480*800
文件夹：drawable-xhdpi    图片尺寸：720*1280
文件夹：drawable-xxhdpi   图片尺寸：960*1600
文件夹：drawable-xxxhdpi  图片尺寸：1280*1920

7.修改app/src/main/res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#000000</color>
</resources>

8.如果要设置启动页透明只需要修改android/app/src/main/res/values/styles.xml

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

9.在首页设置多久隐藏启动页

import SplashScreen from 'react-native-splash-screen'

export default class WelcomePage extends Component {

    componentDidMount() {
        setTimeout(() => { SplashScreen.hide() }, 2000)
    }
}

 

本文地址：https://blog.csdn.net/zhenzhenzhen1705/article/details/110231671