react native 启动屏 设置 react-native-splash-screen

简介: ios端集成组件的安装yarn add react-native-splash-screenreact-native link react-native-splash-screen在 AppDelegate.

ios端集成
组件的安装

yarn add react-native-splash-screen
react-native link react-native-splash-screen

在 AppDelegate.m中导入 这个类


img_bc1e60ae7af3ce5ee0e3118effbe3e12.png
image.png
#import "RNSplashScreen.h"

有的地方是 #import "SplashScreen.h" 这里要注意看下 这个组件的类名是什么


img_916c70ac56b29edf249b3495feea9337.png
image.png

img_066e2bc97a562b0a3b335c34dea3ea80.png
image.png

在AppDelegate.m中导入 这个类 后 开启启动屏


img_7354a905c2b0eef9ec72849a0d3d79a6.png
image.png

到这里基本配置算是完了 。
接下来配置启动图


img_05e212ecfe5b3fe33009ebb45d5ae11a.png
image.png

点进去


img_dcd2bdd1eb92f6169aee3a7eea5a9151.png
image.png

img_ee31f65cc733e627ca85462766140f30.png
image.png

到这里 我们就要拖拽不同尺寸的适配图进去了
Mac的话 可以用这个软件 准备一张1024*1024.png大小的图
这个软件可以生成启动图 还有logo图都可以

img_1fa5c77e53432a0bf6ed3af8754564cd.png
image.png

也可以通过这个网址 上传 然后下载下来 ios android logo生成 这个网址只能生成logo图标
生成这些启动图 按照尺寸大小拖拽进去就可以了。
img_82a4b5c2153d20fb4cf1f017fdd15e44.png
image.png

保存下来
img_4d075436825b8b28a8475f6226e01ec7.png
image.png

img_f968717160028c5bbd09d488f9080a53.png
image.png

在RN中的入口文件 配置关闭

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

 componentDidMount() {

    SplashScreen.hide() //隐藏启动屏
}
.......

如果出现黑屏或者 不显示启动图 说明没有引对


img_bb08bd8285bfb7e2c7c8bdea01731ae1.png
image.png

这个地方能够点进去 并且对应的名称一致 就可以了

img_c157ee67827e31a442dce17b976658a4.png
效果图

ios的完成!

目录
相关文章
|
4天前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
|
6天前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
4天前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
22天前
|
前端开发 IDE 小程序
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
26 0
|
29天前
|
移动开发 前端开发 JavaScript
探究移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动端混合开发技术在移动应用开发领域日益流行,为开发者提供了更高效的跨平台开发方案。本文将比较三种主流混合开发技术:React Native、Weex和Flutter,从性能、生态系统和开发体验等方面进行评估,以帮助开发者在选择适合自己项目的技术时做出明智的决策。
|
1月前
|
前端开发 JavaScript Android开发
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
|
1月前
|
移动开发 前端开发 weex
React Native、Weex、Flutter 混合开发技术的比较与选择
移动应用已经成为人们日常生活中不可或缺的一部分,而混合开发技术也随之崛起并逐渐成为主流。本文将比较 React Native、Weex 和 Flutter 三种混合开发技术,并探讨它们各自的优缺点,以及如何根据项目需求做出选择。
24 1
|
1月前
|
开发框架 Dart 前端开发
Flutter vs React Native:跨平台移动应用开发的终极对决
随着移动应用的普及,跨平台移动应用开发成为了一种趋势。Flutter和React Native是当前最受欢迎的跨平台开发框架之一,但它们各自有着不同的特点和优势。本文将对Flutter和React Native进行全方位比较,以帮助开发者了解两个框架的差异,从而选择适合自己的开发工具。
14 3
|
1月前
|
开发框架 前端开发 JavaScript
react native是什么,怎么用
react native是什么,怎么用
11 0
|
1月前
|
移动开发 前端开发 weex
移动端混合开发技术:React Native、Weex、Flutter 之争
在移动应用开发领域,React Native、Weex 和 Flutter 是备受关注的混合开发技术。本文将对它们进行全面比较与评估,以帮助开发者做出明智的选择。我们将从开发生态、性能、跨平台能力和易用性等方面进行比较,为读者提供全面的参考和指导。

相关产品

  • 云迁移中心