ReactNative 启动白屏解决方案 react-native-splash-screen

本文主要是介绍ReactNative 启动白屏解决方案 react-native-splash-screen,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

安装

1.添加
yarn add react-native-splash-screen
2.自动link
react-native link
或者
react-native link react-native-splash-screen

修改原生代码

Android:

通过以下更改更新MainActivity.java以使用react-native-splash-screen:

import android.os.Bundle; // here 
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1 
import org.devio.rn.splashscreen.SplashScreen; // here 
// react-native-splash-screen < 0.3.1 
import com.cboy.rn.splashscreen.SplashScreen; // here public class MainActivity extends ReactActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {SplashScreen.show(this);  // here super.onCreate(savedInstanceState);}// ...other code 
}
iOS:

使用以下添加内容更新AppDelegate.m:

#import "AppDelegate.h"#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "SplashScreen.h"  // here@implementation AppDelegate- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{// ...other code[SplashScreen show];  // herereturn YES;
}@end

配置资源文件

Android还需要配置一些资源文件

在app / src / main / res / layout中创建一个名为launch_screen.xml的文件(如果不存在,则创建layout文件夹)。该文件的内容应如下所示:
<?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="@drawable/launch_screen">
</LinearLayout>
在app / src / main / res / drawable中创建一个名为launch_screen的图片文件(如果不存在,则创建drawable文件夹)。
通过创建launch_screen.png文件并将其放入适当的可绘制文件夹来自定义启动屏幕。Android会自动缩放drawable,因此您不一定需要为所有手机密度提供图像。您可以在以下文件夹中创建启动画面:
  • drawable-ldpi
  • drawable-mdpi
  • drawable-hdpi
  • drawable-xhdpi
  • drawable-xxhdpi
  • drawable-xxxhdpi
在app / src / main / res / values / color.xml中添加一个名为primary_dark的颜色:
<?xml version="1.0" encoding="utf-8"?>
<resources><color name="primary_dark">#000000</color>
</resources>
设置背景透明

如果不设置的,还是会有一小段时间白屏。
打开android / app / src / main / res / values / styles.xml并将<item name =“android:windowIsTranslucent”> true </ item>添加到文件中。它应该看起来像这样:

<resources><!-- Base application theme. --><style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"><!-- Customize your theme here. --><!--设置透明背景--><item name="android:windowIsTranslucent">true</item></style>
</resources>

Android端结构图大致为:
项目结构图

JS端代码:
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 screenSplashScreen.hide();}
}

这篇关于ReactNative 启动白屏解决方案 react-native-splash-screen的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1026174

相关文章

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

在MySQL执行UPDATE语句时遇到的错误1175的解决方案

《在MySQL执行UPDATE语句时遇到的错误1175的解决方案》MySQL安全更新模式(SafeUpdateMode)限制了UPDATE和DELETE操作,要求使用WHERE子句时必须基于主键或索引... mysql 中遇到的 Error Code: 1175 是由于启用了 安全更新模式(Safe Upd

Python安装时常见报错以及解决方案

《Python安装时常见报错以及解决方案》:本文主要介绍在安装Python、配置环境变量、使用pip以及运行Python脚本时常见的错误及其解决方案,文中介绍的非常详细,需要的朋友可以参考下... 目录一、安装 python 时常见报错及解决方案(一)安装包下载失败(二)权限不足二、配置环境变量时常见报错及

Android里面的Service种类以及启动方式

《Android里面的Service种类以及启动方式》Android中的Service分为前台服务和后台服务,前台服务需要亮身份牌并显示通知,后台服务则有启动方式选择,包括startService和b... 目录一句话总结:一、Service 的两种类型:1. 前台服务(必须亮身份牌)2. 后台服务(偷偷干

Java下载文件中文文件名乱码的解决方案(文件名包含很多%)

《Java下载文件中文文件名乱码的解决方案(文件名包含很多%)》Java下载文件时,文件名中文乱码问题通常是由于编码不正确导致的,使用`URLEncoder.encode(filepath,UTF-8... 目录Java下载文件中文文件名乱码问题一般情况下,大家都是这样为了解决这个问题最终解决总结Java下

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

Idea实现接口的方法上无法添加@Override注解的解决方案

《Idea实现接口的方法上无法添加@Override注解的解决方案》文章介绍了在IDEA中实现接口方法时无法添加@Override注解的问题及其解决方法,主要步骤包括更改项目结构中的Languagel... 目录Idea实现接China编程口的方法上无法添加@javascriptOverride注解错误原因解决方

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》:本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,详细内容请阅读本文,希望能对你有所帮助... 过往的实现方法是使用浮动加

css渐变色背景|<gradient示例详解

《css渐变色背景|<gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变,本文介绍css渐变色背景|<gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景,可以看做是一种特殊的背景图片。(是作为背

Windows设置nginx启动端口的方法

《Windows设置nginx启动端口的方法》在服务器配置与开发过程中,nginx作为一款高效的HTTP和反向代理服务器,被广泛应用,而在Windows系统中,合理设置nginx的启动端口,是确保其正... 目录一、为什么要设置 nginx 启动端口二、设置步骤三、常见问题及解决一、为什么要设置 nginx