向您的React-Native应用程序添加启动画面的最简单方法！

So, you’ve tested and perfected your app. Now before shipping it off for production, you want to add a cool splash screen to it, but how exactly do you add a splash screen to a React-Native app???

因此，您已经测试并完善了您的应用程序。 现在，在将其交付生产之前，您想为其添加一个很酷的启动屏幕，但是您如何向React-Native应用程序中添加一个启动屏幕呢？

Hi, this article is a result of me spending a hell lot of time(2 days actually, go ahead roll your eyes at me) to figure out the best and easiest way to solve the above problem of adding a splash screen to a React-native app, as almost all the tutorials available as of when this post is written(2020 June) have at least some part of the code outdated and so if you are someone like me who is real lazy and tries to copy-paste all the code mentioned in them, your gradle config will break some way or the other and its total frustration.

嗨，这篇文章是我花费大量时间(实际上是2天，继续看着我)的结果，以找出最佳和最简便的方法来解决上述将React屏幕添加闪屏的问题-本机应用程序，因为撰写本文时(2020年6月)截止时几乎所有可用的教程中至少有一部分代码已过时，因此，如果您像我一样真正懒惰，并试图将所有代码复制粘贴，在其中提到的问题，您的gradle配置将以某种方式破坏，并使其完全受挫。

Note: If you are building your app using the awesome expo-cli, then you don’t need to go through the below tutorial, adding a splash screen to an expo app is as simple as replacing the default splash image in assets folder with your own custom image and then renaming it as ‘splash.png’.

注意 ：如果您要使用很棒的expo-cli构建应用程序，则无需阅读以下教程，向EXPO应用程序添加启动屏幕就像用您的资产替换资产文件夹中的默认启动图像一样简单。拥有自定义图片，然后将其重命名为“ splash.png”。

Now, for those of us who have built the app with the good-old react-native init, adding a splash screen consists of the following 4 steps:

现在，对于那些使用过时的react-native init来构建应用程序的人来说，添加启动屏幕包括以下4个步骤：

Step 0: Get the splash image ready!

步骤0：准备好启动画面！

I know, this is a no-brainier. But hey, do you exactly have the splash image in 6 different dimensions? Yes? Then please carry on to the next step. No? Well guess what, you actually do need the same image in 6 dimensions! So how will you manage to make-do with just one image if that’s all what you got?

我知道，这很简单。 但是，您是否确实拥有6个不同尺寸的初始图像？ 是？ 然后，请继续下一步。 没有？ 好吧猜猜，您实际上确实需要6维的相同图像！ 那么，如果仅此而已，您将如何仅用一张图像进行制作？

Don’t bother going to Photoshop and resizing, here’s an awesome tool I found to make the process of splash image generation a piece of cake.

不用担心去Photoshop调整大小，这是一个很棒的工具，我发现它可以使启动图像生成过程变得轻而易举。

Just go to this site, add your one splash image(preferably with the highest quality you could manage), choose the required platform(andoid and/or ios) and punch the Kapow button). The tool will generate a zip file of the splash screen in various different pixel dimensions.

只需转到该站点，添加一个初始图像(最好是可以管理的最高质量)，选择所需的平台(andoid和/或ios)，然后按Kapow按钮。 该工具将以各种不同的像素尺寸生成启动屏幕的zip文件。

Extract it and copy all the contents in the android/or ios folder from the bundle to your android/app/src/main/res folder.

解压缩它，并将android /或ios文件夹中的所有内容从捆绑包复制到android / app / src / main / res文件夹中。

第1步：安装超级酷的npm软件包：react-native-splash-screen (Step 1: Install the super cool npm package: react-native-splash-screen)

This will make the whole process dead simple

这将使整个过程变得简单

npm i react-native-splash-screen

NPM我React本机飞溅屏幕

or

要么

yarn add react-native-splash-screen

纱线添加React本机飞溅筛

Note: if your react-native cli version is below 0.6, don’t forget to link the above package using: react-native link react-native-splash-screen

注意：如果您的react-native cli版本低于0.6，请不要忘记使用以下链接链接以上软件包： react-native link react-native-splash-screen

步骤2：配置(是的，这是必需的：|) (Step 2: Configuration (yes, this is necessary :| ))

Android:

Android：

You have got to update the MainActivity.java file (located at android/app/src/main/java/com/your_project_name folder) in order to use react-native-splash-screen in your project. Just make changes to the file like given below:

您必须更新MainActivity.java文件(位于android / app / src / main / java / com / your_project_name文件夹中)，以便在项目中使用react-native-splash-screen。 只需对文件进行如下所示的更改：

import android.os.Bundle;import com.facebook.react.ReactActivity;import org.devio.rn.splashscreen.SplashScreen;public class MainActivity extends ReactActivity {@Override
 protected void onCreate(Bundle savedInstanceState) {
  SplashScreen.show(this); 
  super.onCreate(savedInstanceState);
 }
// ...other code
}

Now, create a file called launch_screen.xml in app/src/main/res/layout (create the layout folder if it doesn't exist). The contents of the file should be the following:

现在，在app/src/main/res/layout创建一个名为launch_screen.xml的文件(如果不存在layout文件夹，则创建它)。 该文件的内容应为以下内容：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical" android:layout_width="match_parent"
  android:layout_height="match_parent">
  <ImageView android:layout_width="match_parent"                      android:layout_height="match_parent"  android:src="@drawable/screen" android:scaleType="centerCrop" /></RelativeLayout>

Now we have got to add a color called primary_dark in app/src/main/res/values/colors.xml(create if it doesn't exist already)by pasting in the following code:

现在，我们需要通过粘贴以下代码在app/src/main/res/values/colors.xml(create if it doesn't exist already)添加一种名为primary_dark的颜色：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#000000</color>
</resources>

iOS:

iOS：

Update AppDelegate.m (located at ios/splashapp) with the following additions:

使用以下添加项更新AppDelegate.m (位于ios / splashapp)：

#import "AppDelegate.h"#import <React/RCTBundleURLProvider.h>#import <React/RCTRootView.h>#import "RNSplashScreen.h"@implementation AppDelegate- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{// ...other code[RNSplashScreen show];// or//[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView];return YES;}@end

步骤3：隐藏启动画面并加载主屏幕 (Step 3: Hiding the splash and loading your main-screen)

By now, if you run your app, you would be able to see the splash image cover the entire screen(like it should) and showing forever(like it shouldn’t). Basically it would never close, and there is even a chance of your app crashing after a few seconds of the image showing like this.

到现在为止，如果您运行应用程序，您将能够看到闪屏图像覆盖整个屏幕(像它应该那样)并永远显示(像它不应该那样)。 基本上它永远不会关闭，甚至在几秒钟的图像显示后，您的应用程序甚至有崩溃的可能。

Now, when should the splash screen be closed? Maybe when the main entry file of your app is executed? Yes! So let’s just modify App.js so that exactly when the project files would finish loading and is ready to be executed, the splash screen would give way to your main/primary screen.

现在，何时应关闭启动画面？ 也许当您的应用程序的主条目文件被执行时？ 是! 因此，我们只需修改App.js，以便恰好在项目文件完成加载并准备好执行时，启动屏幕将让位于主屏幕/主屏幕。

// make following changes to App.js
import SplashScreen from 'react-native-splash-screen'export default class App extends Component {
  componentDidMount() {
  // do stuff while splash screen is shown
  // After having done stuff (such as async tasks) hide the splash   
  // screen   SplashScreen.hide();
 }
}

In case you are using functional components, just call SplashScreen.hide() inside a useEffect hook.

如果您正在使用功能组件，只需在useEffect挂钩内调用SplashScreen.hide() 。

And, there you go my friends, that’s all there is to it. By following the above steps, you would hopefully be able to add a splash screen to your app within 2–3 minutes.

而且，您可以走到我的朋友那里，仅此而已。 通过执行上述步骤，您有望在2-3分钟内将闪屏添加到您的应用中。

If the above solution for some reason didn’t work for you, or if you want to add some advanced effects in your splash screen like customizing the color of the status bar when loading etc, here are the references I used. However, do keep in mind that all software related guides(including this one) tend to get outdated as new features get added to the various packages used and some breaking change occurs. That being said, all the best on your project. Cheers!

如果上述解决方案由于某种原因对您不起作用，或者您想要在启动屏幕中添加一些高级效果，例如在加载时自定义状态栏的颜色等，则这里是我使用的参考。 但是，请记住，随着新功能添加到所使用的各种软件包中并且发生一些重大变化，所有与软件相关的指南(包括本指南)都趋于过时。 话虽如此，您的项目一切顺利。 干杯!

翻译自: https://medium.com/swlh/the-easiest-way-to-add-a-splash-screen-to-your-react-native-app-2d36bee3117b