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. ResNet详解(转)

    本篇文章涉及到的文献 Residual Network(ResNet) Deep Residual Learning for Image Recognition[arXiv:1512.03385] I ...

  2. js 中常见的深拷贝的方法

    建议最简单的第一种 1.通过 JSON 对象实现深拷贝 this.data = JSON.parse(JSON.stringify(this.vm.$store.state.security.menu ...

  3. python - 斐波那契(Fibonacci)数列

    斐波那契数列即数列中每一项等于它前面两项的和,公式如下: f(n) = f(n-1) + f(n-2)    n>2        -----        递推公式 f(n) = 1     ...

  4. Rancher 1.6 版本 只能在 linux 下用

    实际操作 启动 , 访问方式 : 在启动过程中会发现没有 image , 然后自动下载 ( 执行 docker pull 命令 ) docker run --rm --privileged -v /v ...

  5. C++中函数调用时的三种参数传递方式

    在C++中,参数传递的方式是“实虚结合”. 按值传递(pass by value) 地址传递(pass by pointer) 引用传递(pass by reference) 按值传递的过程为:首先计 ...

  6. Centos 7.0设置/etc/rc.local无效问题解决

    安装centos7以后按照以往习惯修改rc.local添加开机启动命令,但重启后发现无效,再次重启发现依然如故 检查系统rc.local服务运行情况 systemctl | grep "rc ...

  7. ubuntu系统复制到其他地方或克隆后,如何正确修改IP及MAC地址的解决方案(图文详解)

    修改ip地址 永久修改MAC地址 方法一: 1)编辑“/etc/init.d/rc.local”文件(sudo gedit /etc/init.d/rc.local) 2)在此配置文件的最后面加上如( ...

  8. Git命令学习笔记

    一.本地代码增,删,改,查,提交,找回git checkout .                //抛弃工作区所有修改git checkout -- <file>    //抛弃工作区& ...

  9. Firebird Procedure 带返回的存储过程

    火鸟定义带返回的存储过程是这样,先定义返回结果字段列表,然后为返回字段一一赋值,当你需要返回一行时,就suspend. 当需要返回多行时,就再次为返回字段变量赋值,suspend. 示例: creat ...

  10. ie6的display:inline-block实现

    摘抄自原文链接 简单来说display:inline-block,就是可以让行内元素或块元素变成行内块元素,可以不float就能像块级元素一样设置宽高,又能像行内元素一样轻松居中. 在ie6中给div ...