首页 > 技术文章 > rn-splash-screen 启动页 安卓

lude1994 2019-04-19 14:03 原文

1. 进入项目npm install --save rn-splash-screen 

2.react-native link rn-splash-screen

3.在项目android/app/src/main/res/ 路径下创建一个名称为drawable的文件夹,并在该文件夹下放置一个名称为splash的png格式的图片(用于启动页面的图片)

4.在android/app/src/main/res/values/路径下的styles.xml文件中加入配置:

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

       <item name="android:windowBackground">@drawable/splash</item>

    </style>

5. 在/android/app/src/main/路径下的AndroidManifest.xml文件中做如下修改

<application
android:name="xxx.MainApplication" //这个xxx跟具体的app的包名有关
android:allowBackup="true"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
- android:theme="@style/AppTheme" //前面的减号表示要删除(如果原来有的话)
+ android:icon="@mipmap/ic_launcher" //前面的加号表示要添加(如果原来没有的话)
>
<activity
android:name="com.skyocean.youjoylife.MainActivity"
android:label="@string/app_name"
+ android:theme="@style/AppTheme" //前面的加号表示要添加(如果原来没有的话)
android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>

 

6.在android/app/src/main/java/com/__APPNAMES__/路径下的MainActivity.java中做如下修改


import android.graphics.Color;
import android.os.Bundle;

import com.facebook.react.ReactInstanceManager; //**********需要添加的************
import com.facebook.react.bridge.ReactContext; //**********需要添加的************
import com.mehcode.reactnative.splashscreen.SplashScreen;//**********需要添加的************

public class MainActivity extends ReactActivity {
// [...]

@Override
protected void onCreate(Bundle savedInstanceState) {
// Show the js-controlled splash screen
SplashScreen.show(this, getReactInstanceManager()); //**********需要添加的************

super.onCreate(savedInstanceState);

}

}

 

7.在入口文件引入配置:

import SplashScreen from "rn-splash-screen";

  

componentDidMount(){
  //隐藏闪屏页,闪屏页用的是第三方库,rn-splash-screen
  setTimeout(() => {
    SplashScreen.hide();
  }, 2000);//延时2秒消失

}

8.配置结束

 

注:以上配置是参考其他人的成果,本人已成功配置,只为保存文档。

 

推荐阅读