react-native-splash-screen配置时的笔记

最新推荐文章于 2025-01-25 09:08:01 发布
最新推荐文章于 2025-01-25 09:08:01 发布
阅读量208 收藏
点赞数
分类专栏： ReactNative
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/aexwx/article/details/84104752
版权
本文详细介绍如何在React Native项目中配置启动屏，包括必要的安装步骤、链接配置及常见问题解决办法，如调整图片大小、解决编译错误等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

首先安装

npm install react-native-splash-screen --save

进行链接配置

react-native link react-native-splash-screen

之后可按照下方2个教程操作

https://github.com/crazycodeboy/react-native-splash-screen/blob/master/README.zh.md

https://www.jianshu.com/p/4540ac17dfd4

 

注意事项

安卓端

在配置MainActivity.java时,官方教程里漏了下图所示的第2步

安卓默认的mipmap-hdpi是app的图标,要启动屏的话,要自己新建drawable-hdpi之类的

 图片大小参考

另外打包编译时,会碰到com.android.support:appcompat-v7:26.1.0字样的错误

我去源码里打开这个文件node_module/react-native-splash-screen/android/build.gradle,把该插件所需的编译版本降低,就没事了

 

React Native学习资源汇总
xiangzhihong8的专栏
08-01 2475
目前主流的移动跨平台技术方案大体可以分为三类，一类是使用原生内置浏览器加载HTML5的Hybrid技术方案，采用此种方案的主要有Cordova、Ionic和微信小程序；另一类是使用JavaScript语言进行开发，然后使用原生组件进行渲染，采用此方案的主要有React Native、Weex和快应用；最后一类是使用自带的渲染引擎和自带的原生组件来实现跨平台，采用此种方案的主要是Flutter。 对于其他的浏览器方案，基本可以抛弃了，现在我们讨论移动跨平台开发主要说的是React Native和Flutter
React Native集成react-native-splash-screen(App启动图)
战丶后风！！的博客
02-28 2439
1):下载插件 参考链接:https://github.com/crazycodeboy/react-native-splash-screen #安装依赖 npm i react-native-splash-screen --save #链接依赖库、若链接失败请再次执行npm install命令后重新链接 react-native link react-native-splash-screen...
react-native-splash-screen
04-30
React本机启动屏幕 用于本机的初始屏幕API，可以以编程方式隐藏和显示初始屏幕。 适用于iOS和Android。 内容 变化 对于React Native> = 0.47.0使用v3。+ ，对于React Native <0.47.0使用v2.1.0 例子 例子 安装 第一步（下载）： 运行npm i react-native-splash-screen --save 第二步（插件安装）： 自动安装 react-native link react-native-splash-screen或rnpm link react-native-splash-screen 手动安装 安卓： 在您的android/settings.gradle文件中，添加以下内容： include ' :react-native-splash-screen ' project( ' :re
react-native 启动页（react-native-splash-screen）
weixin_34034261的博客
08-10 374
用于解决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 SplashScreen 常见问题解决方案
最新发布
gitblog_00194的博客
01-25 691
React Native SplashScreen 常见问题解决方案 react-native-splashscreen 项目地址: https://gitcode.com/gh_mirrors/re/react-native-...
react-native-splash-screen 3.0.7配置使用
博客
06-07 798
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;最近在把之前写的一个react-native项目升级到最新版本，项目中使用了react-native-splash-screen。在最新版本的react-native-cli中按照文档配置导致报错。主要是gradle版本太低的问题，现总结一下： 源码：reactSplashDemo 1.先查看版本（截止到2018.6.7）...
react-native-splash-screen集成实践（ios & android）
weixin_33804582的博客
09-23 140
react-native在启动的时候会有瞬间的白屏出现，ios白屏时间会很短，安卓要相对长一些，大概1-3s时间。这是react-native的工作机制决定的。 react-native在启动时会装载js bundle到内存并渲染界面，这段时间界面是一个空View.上面的过程我们称之为项目的初始化，那么在这段项目初始化的过程中我们为了有更好的用户体验需要渲染一个对用户友好的界面来代替白屏，毕竟白屏...
react native三方库配置
weixin_44114524的博客
06-23 1260
笔记，用于记录在做react native开发过程中引用三方库的配置。
react-native 监听手机物理按键（音量键）
weixin_41177814的博客
08-19 2237
react-native 监听手机音量按键（结合原生安卓） 目的：监听手机的物理按键实现相应的功能（给自己的笔记） Android KeyCode 可以自行网上查找 可根据相应 KeyEvent 进行手机按键事件拦截 可根据相应 KeyCode 执行你想要执行的内容 需求 -------- 实现进入指定页面后，使用音量键时执行自定义任务，而不是调节系统音量 解决方案 在 MainActiv...
前端程序猿的天花板？react-native开发及调试方案（真实项目，建议收藏）
2401_83330193的博客
03-29 1064
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可获取你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难。
RN中第三方组件
2401_84121685的博客
04-18 320
抖一抖动画小组件（有点意思）封装后动画组件（效果较丰富）文件上传jpush-react-native //官方版本react-native-jpush 由 React Native 中文网开发维护。选项卡material组件库（各种漂亮的小组件）base组件库（各种封装不错的小组件）不错的按钮输入框表单验证炫酷效果的 TextInput聊天地图动画加载动画抽屉效果侧滑按钮图表下拉放大可滑动的日历组件语言转化和一些常用格式转换单选多选ListView选择按钮二维码制作本地库影音相关安卓录音提示消息的Bar。
Android代码-react-native-splash-screen
08-06
react-native-splash-screen A splash screen API for react-native which can programatically hide and show the splash screen. Works on iOS and Android. Content Installation Examples Getting started API Contribution Changes Changes For React Native >= 4.0 use v2. , for React Native < 4.0 use v1.0.9 Examples Examples Installation First step(Download): Run npm i react-native-splash-screen --save Second step(Plugin Installation): Automatic installation react-native link react-native-sp
React Native react-native-splash-screen 启动屏库
BradyCC的博客
07-13 1593
RN 项目 安装 react-native-splash-screen 启动屏库 # 安装 react-native-splash-screen yarn add react-native-splash-screen // package.json { "name": "RNApp", "version": "0.0.1", "private": true, "scripts...
rn 启动页react-native-splash-screen配置
weixin_43294560的博客
03-31 1545
Android版: 1、安装 yarn add react-native-splash-screen 2、导入 import SplashScreen from 'react-native-splash-screen' 3、设置组件挂载后消失 componentDidMount(){ SplashScreen.hide(); } 4、android/...
react-native>0.6.0时引入react-native-splash-screen组件
weixin_43762903的博客
12-01 943
将react-native>0.6.0的情况单独列出来，是因为当react-native版本小于0.6时，组件需要手动连接，官网已经给出了引入步骤。 按照官网引入时会出现许多报错，此时可以参考我的另一篇博客https://blog.youkuaiyun.com/weixin_43762903/article/details/103335305 但是，当react-native版本大于0.6.0时，组...
React-native-splash-screen 完整使用说明(Mac完整版) 2019/04/14
我家猫叫佩奇の博客
04-16 3347
react-native-splash-screen 演示 安装说明 第一步(下载): 在项目根目录打开终端运行 npm i react-native-splash-screen --save 第二步 (安装): 大家可以通过自动或手动两种方式来安装react-native-splash-screen。 自动安装 (推荐) 终端运行： react-native link react-native...
推荐开源项目：React Native SplashScreen（来自Remobile）
gitblog_00614的博客
08-24 347
推荐开源项目：React Native SplashScreen（来自Remobile） react-native-splashscreen项目地址:https://gitcode.com/gh_mirrors/re/react-native-splashscreen 在移动应用开发领域，启动画面（Splash Screen）作为用户首次接触应用的视觉桥梁，其重要性不言而喻。今天，我们来深入了解...
纯 JavaScript 实现的 react-native-slider 组件
4. react-native-slider版本兼容性：1.xx版本的react-native-slider只支持React Native >= 0.59.0的版本，这是开发者在使用时需要注意的一个问题。 5. react-native-slider的用法：使用react-native-slider需要首先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值