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.配置结束

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

rn-splash-screen 启动页 安卓的更多相关文章

  1. 【Android开发笔记】Android Splash Screen 启动界面

    public class SplashActivity extends Activity { @Override protected void onCreate(Bundle savedInstanc ...

  2. Expo大作战(十五)--expo中splash启动页的详细机制

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  3. React-Native App启动页制作(安卓端)

    原文地址:React-Native App启动页制作(安卓端) 这篇文章是根据开源项目react-native-splash-screen来写的.在使用react-native-link命令安装该包后 ...

  4. Flutter - 给App增加启动屏幕(Splash Screen)并且设置背景颜色

    先看一下效果图,启动图最好设置为png格式的透明图,以防图片填充不满的时候背景图会非常的煞白(Flutter 默认背景色是白色). 打开android\app\src\main\res\drawabl ...

  5. ios 2017启动页(Launch Screen Images)、图标(App Icon)尺寸大小

    ios 2017启动页(Launch Screen Images).图标(App Icon)尺寸大小   iPhone Portrait iOS 8,9-Retina HD 5.5 (1242×220 ...

  6. Android App 启动页(Splash)黑/白闪屏现象产生原因与解决办法(转)

    转载: Android App 启动页(Splash)黑/白闪屏现象产生原因与解决办法   首先感谢博主分享,本文作为学习记录 惊鸿一瞥 微信的启动页,相信大家都不陌生. 不知道大家有没有发现一个现象 ...

  7. 微信小程序 项目实战(一)生命周期 配置服务器信息 splash启动页

    步骤一:小程序 生命周期 //app.js App({ onLaunch: function () { //当小程序初始化完成时,会触发onLaunch(全局只触发一次) }, onShow: fun ...

  8. WPF应用程序的启动画面[Splash Screen本质分析]

    原文:WPF应用程序的启动画面[Splash Screen本质分析] 不经意间发现了wpf的这个小玩意,感觉蛮有意思的.我在项目中添加了一张图片 如图: wpf-1.JPG(10.73 K) 2010 ...

  9. React Native商城项目实战06 - 设置安卓中的启动页

    1.Main 目录下新建LaunchImage.js: /** * 启动页 */ import React, { Component } from 'react'; import { AppRegis ...

随机推荐

  1. hdu 3415 单调队列

    Max Sum of Max-K-sub-sequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  2. Jquery AJAX如何使用Promise/Deferred实现顺序执行?

    有的时候有我有N个AJAX请求,第下个请求可能要依赖上个请求的返回值, 可以用 $.ajax("test1.php").then(function(data) { // data ...

  3. Handler向子线程发送数据

    public class MainActivity extends AppCompatActivity { private static final String TAG = "MainAc ...

  4. Block浅析一

    1.在Block结构体中含有isa指针,这就证明了Block其实就是对象,并具有一般对象的所有功能. 2.Block是OC中的一种数据类型,在iOS开发中被广泛使用. 3.block的应用 (1)遍历 ...

  5. Redis之Ubuntu开机启动

    1.编译源码,生成可执行文件: 2.将生成的可执行文件拷贝到 /user/local/bin目录下,若没有x权限请加上: 3.将安装包中的 redis.conf配置文件移到/etc/redis.con ...

  6. webpack4 中的最新 React全家桶实战使用配置指南!

    最新React全家桶实战使用配置指南 这篇文档 是吕小明老师结合以往的项目经验 加上自己本身对react webpack redux理解写下的总结文档,总共耗时一周总结下来的,希望能对读者能够有收获, ...

  7. legend2---开发日志12(vue如何进一步学习)

    legend2---开发日志12(vue如何进一步学习) 一.总结 一句话总结:还是得找教程(比如视频),自己摸索太浪费时间,也容易踩坑和抓不住重点 还是得找教程(比如视频),自己摸索太浪费时间,也容 ...

  8. 浅谈如何删除JSP编译后的空行

    当你在客户端用view source看JSP生成的代码时,会发现有很多空行,他们是由< %...% >后的回车换行而生成的,也就是说每一行由< %...% >包含的JSP代码到 ...

  9. June 25,2014---->Binder(IPC),Dalvik ,DEX/ODEX

    1.Binder(IPC) Linux进程之间要能够互相通信,从而共享资源和信息.所以,操作系统内核必须提供进程间的通信机制(IPC,Inter-Process Communication). IPC ...

  10. json数组对象和对象数组 ---OK

    一.Json的简单介绍 从结构上看,所有的数据最终都可以分成三种类型: 第一种类型是scalar(标量),也就是一个单独的string(字符串)或数字(numbers),比如“北京”这个单独的词. 第 ...