用于解决iOS和Android启动白屏问题及简单的启动页面展示

下载 react-native-splash-screen

yarn add react-native-splash-screen

react-native link react-native-splash-screen

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、android/app/src/main/java/com/.../MainApplication.java

import org.devio.rn.splashscreen.SplashScreenReactPackage;

new SplashScreenReactPackage(),

以上3步都是 在link 之后就自动加上了的

4、在android/app/src/main/java/com/.../MainActivity.java文件下添加以下代码

...
import android.os.Bundle; //add
import org.devio.rn.splashscreen.SplashScreen; //add
...
public class MainActivity extends ReactActivity {
...
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this); //add
super.onCreate(savedInstanceState);
}
}

5、然后在android/app/src/main/res文件夹下创建 layout 文件夹,并在下面  启动页的XML文件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="@mipmap/launch_screen"> //该路径为后面设置的启动图片位置
</LinearLayout>

6、以上运行后即可展示出启动页面,但仍有白屏闪过在android/app/src/main/res/values/styles.xml加入代码

<resources>

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

ios 配置:

  在AppDelegate.m文件中加入如下代码

...
#import "SplashScreen.h" //引入头文件
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
..
[SplashScreen show]; // 启动后进入启动页
return YES;
} @end

2.设置启动图片来源 此处忽略不记录了,之前已经记录过了

然后就是在react-native 中使用了,在需要关闭的地方关闭启动页就行了了

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

componentDidMount() {
setTimeout(SplashScreen.hide,2000);
}

.

react-native 启动页(react-native-splash-screen)的更多相关文章

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

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

  2. react native 第一次下载app的欢迎页+每次启动app的启动页设计

    欢迎各位同学加入: React-Native群:397885169 大前端群:544587175 大神超多,热情无私帮助解决各种问题. 我想我写的这篇博文可以帮助到很多人,接下来要分享的东西,对app ...

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

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

  4. 【React Native开发】React Native移植原生Android项目(4)

    ),React Native技术交流4群(458982758),请不要反复加群!欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章 ...

  5. React Native 系列(二) -- React入门知识

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

  6. React-Native(三):React Native是基于React设计的

    React Native是基于React js设计的. 参考:<React 入门实例教程> React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript ...

  7. 用 React 编写移动应用 React Native

    转载:用 React 编写移动应用 React Native ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App.而且React ...

  8. [React Native] Installing and Linking Modules with Native Code in React Native

    Learn to install JavaScript modules that include native code. Some React Native modules include nati ...

  9. React构建单页应用方法与实例

    React作为目前最流行的前端框架之一,其受欢迎程度不容小觑,从这门框架上我们可以学到许多其他前端框架所缺失的东西,也是其创新性所在的地方,比如虚拟DOM.JSX等.那么接下来我们就来学习一下这门框架 ...

  10. React + Node 单页应用「二」OAuth 2.0 授权认证 & GitHub 授权实践

    关于项目 项目地址 预览地址 记录最近做的一个 demo,前端使用 React,用 React Router 实现前端路由,Koa 2 搭建 API Server, 最后通过 Nginx 做请求转发. ...

随机推荐

  1. mysql 连接失败问题汇集

    FHost '192.168.5.128' is not allowed to connect to this MySQL serverConnection closed by foreign hos ...

  2. http模拟登录

    = =其实很简单,写这个的目的呢,是为了练习下Ruby而已 就是post到登录地址,得到cookie,然后以后的请求都用这个cookie就好了. require 'net/http' module E ...

  3. UVA 11045 My T-shirt suits me

    一开始就想到网络流..后来一想暴力能不能过.自己写的T了.看了别人有暴力过的. 暴力的思路就是6进制数字表示给予的衣服的数量.然后每个人的需求表示成01 的6位串然后爆搜. 网络流就建一个源一个汇 然 ...

  4. linux内存管理2:内存映射和需求分页(英文名字:demand Paging,又叫:缺页中断)【转】

    转自:http://blog.csdn.net/zhangxinrun/article/details/5873148 当某个程序映象开始运行时,可执行映象必须装入进程的虚拟地址空间.如果该程序用到了 ...

  5. 1.Openstack-环境安装

    Centos7 OpenStack环境安装 Ifcofnig vim命令 Centos7最小化安装后如没有ifconfig vim命令,执行: 1 yum install -y net-tools v ...

  6. Spring Mvc 传递参数要controller出现了400,日期参数全局处理,格式化yyyy-MM-dd 和yyyy-MM-dd HH:mm:ss

    描述:今天做一个业务操作的时候,ajax传递参数要controller出现了400,前后台都没有报错. 问题:springmvc 在接收日期类型参数时,如不做特殊处理 会出现400语法格式错误 解决: ...

  7. 【linux高级程序设计】(第十四章)TCP高级应用

    文件I/O方式比较 1.阻塞式文件I/O 进程从调用函数开始,直到返回这段时间都处于阻塞状态. 2.非阻塞式文件I/O 如果当前没有数据可操作,将不阻塞当前进程,而是立即返回一个错误信息.需要反复尝试 ...

  8. 恢复安装过树莓派相关操作系统的TF卡容量

    原文地址:传送门 前言玩树莓派的都知道,当我们向TF卡写入系统后,在Windows下能识别的只有几百M的容量了,这主要是由于在装Linux系统的时候给TF卡分了Windows无法识别的分区,下面我用图 ...

  9. Codeforces 954I Yet Another String Matching Problem(并查集 + FFT)

    题目链接  Educational Codeforces Round 40  Problem I 题意  定义两个长度相等的字符串之间的距离为:   把两个字符串中所有同一种字符变成另外一种,使得两个 ...

  10. 动态读取cron表达式

    项目中在使用任务调度时往往会用到cron表达式,比如每五分钟执行一次,每天12点执行一次,每周四凌晨1点执行一次等.但是如果将cron表达式写死,往往不利于测试.解决方案:我们可以将cron表达式写入 ...