react-native-splash-screen在GitHub上的地址:https://github.com/crazycodeboy/react-native-splash-screen

react native,对呀app启动屏的生成没有讲解,网上对于启动屏的讲解也是有各种各样的办法;这里讲解一下iOS和android生成启动屏,以及结合第三方插件react-native-splashScreen友好显示启动屏的步骤

  • iOS、android如何生成启动屏

在做iOS开发之前,学习锅ionic,也是一种混合开发框架,ionic和react native开发环境基本类似,对于ionic不多说,简单点讲就是ionic只用两张图片(图标,启动屏)就可以快速生成iOS和android适应各个尺寸的相应图片了。当然,如果不会使用ionic,找设计师作图就行。以后会发个链接讲一下ionic生成启动屏的步骤。

  • 安装和link react-native-splash-screen
npm i react-native-splash-screen --save
  • 安装之后需要在android和iOS上配置:
  1. iOS配置:
  2. android配置:
  • 使用代码:
import SplashScreen from 'react-native-splash-screen'

export default class WelcomePage extends Component {

    componentDidMount() {
// do stuff while splash screen is shown
// After having done stuff (such as async tasks) hide the splash screen
SplashScreen.hide();
}
}

react-native-splash-screen的更多相关文章

  1. Apple & iOS & Device Screen Sizes and Orientations & React Native

    Apple & iOS & Device Screen Sizes and Orientations & React Native iOS devices https://de ...

  2. React Native(ios)项目中logo,启动屏设置

    由于logo和启动屏尺寸多,react native(ios)中没有命令可以自动生成各种的尺寸,所以可以使用以下办法:在ionic项目中生成(使用命令:ionic resources)后,再粘贴到re ...

  3. React Native视频播放(iOS)

    网站链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/learn-react-native-video/ React Nativ ...

  4. React Native 之 项目实战(一)

    前言 本文有配套视频,可以酌情观看. 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我. 文中所有内容仅供学习交流之用,不可用于商业用途,如因此引起的相关法律法规责任,与我无关. 如文中内容对 ...

  5. React Native 系列(八) -- 导航

    前言 本系列是基于React Native版本号0.44.3写的.我们都知道,一个App不可能只有一个不变的界面,而是通过多个界面间的跳转来呈现不同的内容.那么这篇文章将介绍RN中的导航. 导航 什么 ...

  6. React Native 系列(九) -- Tab标签组件

    前言 本系列是基于React Native版本号0.44.3写的.很多的App都使用了Tab标签组件,例如QQ,微信等等,就是切换不同的选项,显示不同的内容.那么这篇文章将介绍RN中的Tab标签组件. ...

  7. React Native填坑之旅 -- 使用react-navigation代替Navigator

    Navigator已经被React Native废弃了.也许你可以在另外的一个依赖库里react-native-deprecated-custom-components里找到.不过既然官方推荐的是re ...

  8. React Native学习(三)—— 使用导航器Navigation跳转页面

    本文基于React Native 0.52 参考文档https://reactnavigation.org/docs/navigators/navigation-prop 一.基础 1.三种类型 Ta ...

  9. React Native之使用导航器跳转页面(react-navigation)

    react-navigation是一个导航库,要使用react-navigation来实现跳转页面,首先得在项目中安装此库,由于Yarn是Facebook提供的替代npm的工具,可以加速node模块的 ...

  10. ReactJs和React Native的那些事

    介绍 1,React Js的目的 是为了使前端的V层更具组件化,能更好的复用,它能够使用简单的html标签创建更多的自定义组件标签,内部绑定事件,同时可以让你从操作dom中解脱出来,只需要操作数据就会 ...

随机推荐

  1. iis上部署本地数据库LocalDB的方法

    1. iis应用程序池的标识设置为"ApplicationPoolIdentify"(比较安全) 2. 不要将数据库物理文件保存在网站的物理路径内,因为iis应用程序池的标识为Ap ...

  2. Cloudera Manager安装之Cloudera Manager安装前准备(Ubuntu14.04)(一)

    其实,基本思路跟如下差不多,我就不多详细说了,贴出主要图. 博主,我是直接借鉴下面这位博主,来进行安装的!(灰常感谢他们!) 在线和离线安装Cloudera CDH 5.6.0  Cloudera M ...

  3. idea中运行maven安装jar包到本地仓库跳过test

  4. 【Lua】遍历目录结果输出到页面中,刷新页面后出现500 Internal Server Error

    在通过lua获取目录json字符串,然后作为数据源,通过Extjs生成树的过程中,发生了一个奇怪的问题,那就是获取目录json字符串然后传递给Extjs生成树的这个过程中,一开始都是很顺利的就生成了, ...

  5. C++的引用本质上等同于C的指针

    本文给出一个很小的例子,通过反汇编后观察认为,C++的引用本质上等同于C的指针. o foo1.cpp v.s. foo2.cpp o 对foo1.cpp 和foo2.cpp进行编译 $ g++ -g ...

  6. Java下的i++问题

    在解决一道面试题目时遇到问题. public class Inc { public static void main(String args[]){ Inc inc = new Inc(); int ...

  7. step5: 编写spider爬取

    改写parse函数 实现功能: 1.获取文章列表页中的文章url并交给scrapy下载后,交给解析函数进行具体字段的解析2.获取下一页的url并交给scrapy进行下载,下载完成后交给parse 提取 ...

  8. Golang教程:并发介绍

    Go是并发语言,而不是并行语言.在讨论Go并发性之前,我们必须首先了解什么是并发,以及并发与并行的区别. 什么是并发 并发(concurrency)是指一次处理大量事情的能力.让我们用一个例子来说明. ...

  9. WPF TextBox 聚焦

    1.利用行为 http://blog.csdn.net/lianchangshuai/article/details/9223125 2. 利用装饰器 http://stackoverflow.com ...

  10. D3基础---简介和数据

    D3.js是一种数据操作类型的javascript库(也可视其为插件):结合HTML,SVG和CSS,D3可以图形化的,生动的展现数据. d3获取:http://d3js.org/ 在代码文件中引入D ...