react-native 启动页(react-native-splash-screen)
用于解决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)的更多相关文章
- Expo大作战(十五)--expo中splash启动页的详细机制
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
- react native 第一次下载app的欢迎页+每次启动app的启动页设计
欢迎各位同学加入: React-Native群:397885169 大前端群:544587175 大神超多,热情无私帮助解决各种问题. 我想我写的这篇博文可以帮助到很多人,接下来要分享的东西,对app ...
- React Native商城项目实战06 - 设置安卓中的启动页
1.Main 目录下新建LaunchImage.js: /** * 启动页 */ import React, { Component } from 'react'; import { AppRegis ...
- 【React Native开发】React Native移植原生Android项目(4)
),React Native技术交流4群(458982758),请不要反复加群!欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章 ...
- React Native 系列(二) -- React入门知识
前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...
- React-Native(三):React Native是基于React设计的
React Native是基于React js设计的. 参考:<React 入门实例教程> React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript ...
- 用 React 编写移动应用 React Native
转载:用 React 编写移动应用 React Native ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App.而且React ...
- [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 ...
- React构建单页应用方法与实例
React作为目前最流行的前端框架之一,其受欢迎程度不容小觑,从这门框架上我们可以学到许多其他前端框架所缺失的东西,也是其创新性所在的地方,比如虚拟DOM.JSX等.那么接下来我们就来学习一下这门框架 ...
- React + Node 单页应用「二」OAuth 2.0 授权认证 & GitHub 授权实践
关于项目 项目地址 预览地址 记录最近做的一个 demo,前端使用 React,用 React Router 实现前端路由,Koa 2 搭建 API Server, 最后通过 Nginx 做请求转发. ...
随机推荐
- mysql 连接失败问题汇集
FHost '192.168.5.128' is not allowed to connect to this MySQL serverConnection closed by foreign hos ...
- http模拟登录
= =其实很简单,写这个的目的呢,是为了练习下Ruby而已 就是post到登录地址,得到cookie,然后以后的请求都用这个cookie就好了. require 'net/http' module E ...
- UVA 11045 My T-shirt suits me
一开始就想到网络流..后来一想暴力能不能过.自己写的T了.看了别人有暴力过的. 暴力的思路就是6进制数字表示给予的衣服的数量.然后每个人的需求表示成01 的6位串然后爆搜. 网络流就建一个源一个汇 然 ...
- linux内存管理2:内存映射和需求分页(英文名字:demand Paging,又叫:缺页中断)【转】
转自:http://blog.csdn.net/zhangxinrun/article/details/5873148 当某个程序映象开始运行时,可执行映象必须装入进程的虚拟地址空间.如果该程序用到了 ...
- 1.Openstack-环境安装
Centos7 OpenStack环境安装 Ifcofnig vim命令 Centos7最小化安装后如没有ifconfig vim命令,执行: 1 yum install -y net-tools v ...
- Spring Mvc 传递参数要controller出现了400,日期参数全局处理,格式化yyyy-MM-dd 和yyyy-MM-dd HH:mm:ss
描述:今天做一个业务操作的时候,ajax传递参数要controller出现了400,前后台都没有报错. 问题:springmvc 在接收日期类型参数时,如不做特殊处理 会出现400语法格式错误 解决: ...
- 【linux高级程序设计】(第十四章)TCP高级应用
文件I/O方式比较 1.阻塞式文件I/O 进程从调用函数开始,直到返回这段时间都处于阻塞状态. 2.非阻塞式文件I/O 如果当前没有数据可操作,将不阻塞当前进程,而是立即返回一个错误信息.需要反复尝试 ...
- 恢复安装过树莓派相关操作系统的TF卡容量
原文地址:传送门 前言玩树莓派的都知道,当我们向TF卡写入系统后,在Windows下能识别的只有几百M的容量了,这主要是由于在装Linux系统的时候给TF卡分了Windows无法识别的分区,下面我用图 ...
- Codeforces 954I Yet Another String Matching Problem(并查集 + FFT)
题目链接 Educational Codeforces Round 40 Problem I 题意 定义两个长度相等的字符串之间的距离为: 把两个字符串中所有同一种字符变成另外一种,使得两个 ...
- 动态读取cron表达式
项目中在使用任务调度时往往会用到cron表达式,比如每五分钟执行一次,每天12点执行一次,每周四凌晨1点执行一次等.但是如果将cron表达式写死,往往不利于测试.解决方案:我们可以将cron表达式写入 ...