更新:2018年2月27日

我经常被问到最后一英里的开发本地应用反应得到它(实际上到应用程序商店)。有更多的不仅仅是构建应用程序,并将其发送给了苹果(Apple)和谷歌(Google)——你必须添加图标,启动屏幕,写描述,更在发送之前进行审核。

今天我们将讨论,Android和iOS上的闪屏。

使用世博会或创建本地应用反应?不需要经历所有这一切——你可以追随他们的文档和设置。

在本教程中我们将在平台ide和写作工作的本地代码。别担心,我将带您亲历了一切。最后的代码是Github上可用。

我将开始通过创建一个新的本地应用的反应react-native init SplashExample。

Protip:设置源控制后在前!它不仅是一个好方法恢复改变当你犯了错误,但它也是一个伟大的方式改为启用闪屏。

闪屏资产

在本教程的前一个版本我展示了如何使用一个大型图像创建闪屏。这可以扩展之间的问题有越来越多的屏幕分辨率。

所以,相反,我们将从单个图像看起来很像我们的图标。这里的想法是两个折叠:

1. 让它看起来像图标用户水龙头长填满整个屏幕无缝过渡。
2. 保持简单。一个闪屏应该只显示几毫秒。它不应该大量的信息——这是,毕竟,一个可怕的加载屏幕。

记住所有这些我们首先一个正方形图像三种尺寸(@1x = 200 px, @2x = 400 px, @3x = 600 px)。

你可以得到这些Github的图像。

准备应用程序

如果你试图建立一个闪屏在反应的家乡那么你可能经历一个白色屏幕flash内容之前加载。如果应用程序有一个白色背景这通常不是很明显,但它仍然是一个痛苦。今天我们要使它非常引人注意,如果我们有任何的白色。要做到这一点,我们将设置一个黑暗的背景颜色在我们的应用程序。

取代App.js与

所有这些设置背景颜色# 4 f6d7a,文本颜色# F5FCFF在状态栏,使用光文本。

添加飞溅屏幕(iOS)

第一次打开Xcode项目。

开放的ios / SplashExample.xcodeproj

然后我们要添加一个新的资产在Xcode形象。您可以访问,在左边导航- SplashExample > SplashExample >或。xcassets,然后按下“+”在第二个左导航器。称之为“SplashIcon”

然后继续添加三个图片下载。他们会自动附着于正确的像素密度。

你可以打开LaunchScreen.xib在最左侧导航器,再次可用。您应该看到这一点。

选择两个文本元素(“SplashExample”和“由本地反应”)和删除它们。

接下来,我们将设置视图的背景颜色。选择“视图”在第二个左导航器。然后,在正确的导航器,选择“背景”,会弹出一个选择对话框。

Protip:它永远带我找到这个,但是如果你在颜色选择器选择第二个选项,然后选择“RGB滑块”您可以输入十六进制值。

设置背景颜色# 4 f6d7a。

然后我们想添加一个图像视图闪屏。你可以发现,按右下角的第三个选项菜单和寻找“形象”。当你将它拖到蓝色的观点。

你想从右上角设置图像源。当您选择任何图像从图像图像下拉。xcassets应该出现——选择SplashIcon。

现在修复比例将“内容模式”设置为“适合”方面。这是在大多数菜单,第二下。

接下来,我们需要确保我们的图标保持集中在屏幕上不管什么设备上运行的应用程序。要做到这一点,在正确的导航器,选择顶部的第五个图标(一个看起来像一个统治者)。

“Autoresizing”一节中您需要禁用了红线,让内心的红色箭头。这将使图像保持集中不管屏幕的尺寸。

让我们用以下:

现在处理的白色屏幕闪…

首先,为什么会这样?当Javascript加载&的桥是初始化。至少这是我思考的方式。闪屏显示应用程序第一次启动时(本地)反应。然后在本地是初始化反应得到白色屏幕所以我们需要做的是"持有"闪屏有点超过默认行为。

我们将使用react-native-splash-screen。

首先安装包,然后链接。

纱添加react-native-splash-screen@3.0.6
react-native链接react-native-splash-screen

然后,我们需要配置方案。在Xcode中打开AppDelegate.m文件。

然后我们将添加#进口“SplashScreen.h”与其他进口,然后添加(SplashScreen显示);略高于返回YES;在didFinishLaunchingWithOptions方法。

最后,在App.js,我们需要告诉闪屏隐藏一旦我们的应用程序已经准备好了。我们会这样做的componentDidMount生命周期钩。

哇!看上去不错。最后一个吹毛求疵。让我们设置状态栏的颜色光闪屏显示。开放的信息。plist在Xcode中并添加一个新行。关键应该“UIStatusBarStyle”和“UIStatusBarStyleLightContent”值(一个字符串)。

,让我们与完美

添加飞溅屏幕(Android)

Android是一个触摸比iOS更为复杂,因为我们需要创建两个单独的闪屏。一个是用react-native-splash-screen,另一个是使用前应用“膨胀”。它也可能更困难,因为我不熟悉安卓工作室。

首先认为我们要做的就是添加图像资产你之前下载到产生目录在android项目。Android比iOS处理不同的像素密度不同所以我们需要做一些修改。

首先,产生文件夹中存在android / app / src / main / res和每个像素密度有不同密度添加到目录名称。这里的图片应该去

• mipmap-mdpi =程序
• mipmap-hdpi = icon@2x.png
• mipmap-xhdpi = icon@3x.png
• mipmap-xxhdpi = icon@3x.png

所以他们一旦重命名文件程序代替。

接下来,我们将创建闪屏显示当应用程序第一次启动从冷启动。

这些指令是高度受这个的影响优秀的指南由大书呆子牧场。它解释了为什么我们在做什么。

首先创建一个background_splash.xml文件中android / app / src / main / res /可拉的(你可能会需要创建的目录)。

添加以下代码:

我们在这里做的是建立一个layer-list(层)的列表,那么设置背景颜色(我们很快就会定义),最后呈现我们的图标。图标将200 dp又高又宽,集中在屏幕上。

接下来,我们将创建一个colors.xml在android / app / src / main / res /值我们将定义我们的蓝色(蓝色是一样的在我们的应用程序)。

然后我们创建一个新的SplashTheme在android / app / src / main / res / / styles.xml值文件。

我们告诉它使用background_splash我们定义为窗口的背景和我们也告诉它使用状态栏的蓝色。我尽可能模仿实际的应用,因此,状态栏的变化。

当我们在这里让我们继续,并确保我们的主要应用程序的默认状态栏主题默认为正确的颜色。让我们styles.xml:

现在我们需要告诉我们的应用程序使用SplashTheme最初。我们将这样做AndroidManifest.xml。里面的<应用> < /应用程序>添加

和修改MainActivity以下。特别注意android:出口= " true "我补充道。

让我用一个AndroidManifest.xml看起来像

现在我们需要创建一个SplashActivity.java文件。

这个SplashActivity的目的。java是我们向前MainActivity(本地应用反应)。它应该是这样的

现在,假设一切都设置正确,如果你运行应用程序然后退出(所以它冷启动)您应该看到下面的。

看起来很好!我们马上启动屏幕然后我们再次得到白色闪光…

修复它不是相当在iOS一样容易,但是仍然不太困难。

如果您还没有安装react-native-splash-screen和链接。

纱添加react-native-splash-screen@3.0.6
react-native链接

然后,我们需要配置本地android的一面。

在MainActivity.java添加

然后配置App.js在您的应用程序,如果你还没有准备好,尽快关闭闪屏应用负载。

然后你想要创建一个launch_screen.xml(名字很重要!)的内部android / app / src / main / res /布局的根元素LinearLayout。

Android工作室有一个接口非常类似于Xcode的界面构建器,但我不确定它是如何工作的所以我要直接修改的元素。

首先我要设置的严重性LinearLayout中心和背景颜色蓝色。其余的默认设置。

然后我将呈现一个ImageView里面的图标的呈现LinearLayout。

上的属性ImageView。

• android: layout_width,android: layout_height——设置高度和宽度。我们希望它是一样的background_splash.xml。
• android: layout_marginTop——这是状态栏的高度。如果我们忽略这个图标不会完全是在同一个地方,你会看到一个“跳”时,飞溅屏幕开关
• android: src = " @mipmap /图标”图像呈现

最后,内部colors.xml文件我们需要添加:

<颜色名称= " primary_dark " > # 4 f6d7a > < /颜色

否则,应用程序会崩溃。这是一个错误react-native-splash-screen并在将来发布的版本中可能是固定的。

我希望你发现这有帮助!

我希望你喜欢这个教程!如果你有兴趣成为一个反应本地开发人员加入超过18000人学习反应本地的例子!