Question

我正在使用React Native应用程序而我正在尝试设置自定义启动屏幕，但我无法做到。

React Native默认创建一个LaunchScreen.xib，所以我在Images.xcassets中创建了一个LaunchImage：

我还读到我要在我的选项中修改“App Icons and Launch Images”下的“Launch Screen File”：

一旦我完成了，我的启动屏幕变得完全黑了，当应用程序加载时，有顶部和底部黑色框架：

所以我不知道在React Native项目中设置启动画面需要做些什么。

如果有人可以帮我解决这些麻烦，我将不胜感激。

提前致谢。

Answer 1

在这个帖子的帮助下，我能够解决这个问题：Launch Image not showing up in iOS application (using Images.xcassets)

所以我会深入解释，以防它可以帮助别人。

首先，您需要创建某些图片。我使用的是这个模板和这个带有自动生成器的网页：TiCons

当我下载我的图片时，我把资产/ iphone文件夹中的内容拿走了，我只拿了那些：

Default@2x.png （640x960）
Default-568h@2x.png （640x1136）
Default-667h@2x.png （750x1334）
Default-Portrait-736h@3x.png （1242x2208）
Default-Landscape-736h@3x.png （2208x1242）

此外，您需要在同一个文件夹中使用 Contents.json 文件，我是从朋友那里得到的：

{
  "images": [
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-568h@2x.png",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "retina4"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-667h@2x.png",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "667h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-Landscape-736h@3x.png",
      "minimum-system-version": "8.0",
      "orientation": "landscape",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-Portrait-736h@3x.png",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default@2x.png",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x"
    }
  ],
  "info": {
    "version": 1,
    "author": "xcode"
  }
}

所以，此时我在React Native项目的 Images.xcassets 文件夹中创建了一个名为 LaunchImage.launchimage 的文件夹，并保存图像和目录里面的.json 文件：

第二次，您必须在Xcode和＆＃34; General＆＃34;中打开您的项目。设置，在＆＃34; 应用图标和启动图像＆＃34;我们必须保留选项＆＃34; 启动屏幕文件＆＃34;为空（我们也可以删除项目中的 LaunchScreen.xib 文件），然后点击＆＃34; 使用资产目录＆＃34;之后。模式将打开，我们选择迁移目录图像

现在，在＆＃34; 启动图像源＆＃34;选择器，我们可以选择之前创建的文件夹 LaunchImage （带有我们图像的文件夹）：

我们选择此代替品牌资产，我们可以删除品牌资产文件夹。

此时，我们可以使用自定义启动映像运行React Native应用程序：

我知道这对于一项据称很容易的任务似乎有点复杂，但在阅读了很多关于它之后，这是我可以让我的启动图像工作的唯一方法，所以我想与社区分享。

Answer 2

确保从模拟器中删除该应用程序。然后对你的项目进行清理。

Answer 3

我在SO中一直在寻找这些答案，其中包含如何创建新的启动屏幕的解决方案。我的意思是让我们考虑一下。

当我们创建一个新的react-native项目时，我们会看到什么发布屏幕？

<强> ＆GT; Facebook的默认启动屏幕

所以这让我思考，他们是怎么做到的？

他们创建了LaunchScreen.xib

我认为必须有这样的理由。所以我进入LaunchScreen.xib并更改了默认文本＆＃34; React Native ...＆＃34;或者说什么。我再次运行应用程序，看到启动屏幕反映了我的编辑。

解决方案1  编辑现有的 LaunchScreen.xib

解决方案2 创建我自己的

所以我做了，输入这个答案花了我更长时间，而不是学习如何创建自己的答案。的 Both of these solutions are compatible with all the devices.

第1步：

删除LaunchScreen.xib


第2步：

点击images.xcassets 右键单击空白区域单击**import**，然后选择要添加的图像。


第3步：

右键单击项目的根文件夹，然后添加Launch Screen类型的新文件，并根据需要为其命名。


第4步

点击左侧导航栏中的项目，转到Settings＆gt; General以及App Icons and Launch Images下。确保Launch Image Source为空，Launch Screen File与新创建的启动屏幕的名称相同。


第5步

点击您在step 2中创建的全新文件，拖动Image View或编辑您的喜好。

那就是它，你已经完成了。您甚至不需要清理解决方案，只需重建即可。

Answer 4

我建议generator-rn-toolbox使用react-native应用启动屏幕或主图标。它更简单易用，通过cli作为反应原生。

不需要打开XCode。
不需要为各种分辨率制作大量图像文件。
任何时候使用一行推荐更改启动屏幕。

要求

node＆gt; = 6
一张正方形图片或psd文件，其大小超过 2208x2208 px分辨率，用于启动屏幕（启动画面）
积极心态;）

安装

安装generator-rn-toolbox和yo
npm install -g yo generator-rn-toolbox
安装imagemagick brew install imagemagick
在iOS上应用启动画面

yo rn-toolbox:assets --splash YOURIMAGE.png --ios

或Android

yo rn-toolbox:assets --splash YOURIMAGE.png --android

这就是全部。 :)

Source

Answer 5

Just went through this and works a treat. The only road block I discovered was not clearing the simulator content. If you find that your new launch screen isn't working you need to open the simulation and go to the following:

Simulator > Reset content and settings

There must be some hardcore caching going on within that simulator but once that was done - rerun and you'll see the app. Make sure you do this for both xcode simulators and react-native simulators!

Answer 6

确保“启动屏幕文件”选择为空：

Answer 7

Follow this link:

如果你想在我的React Native应用程序中添加一个启动画面。按照这个过程，结果将是你的全部。

<强> STEP：1 首先，我创建了一个splashImageResource文件夹，并使用splash图像添加了launchScreen.xib文件。

<强> STEP：2 使用此代码<subviews> <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" image="splash.png" translatesAutoresizingMaskIntoConstraints="NO" id="ZkI-RL-69Z"> </imageView> </subviews>

change the code as written inside the subviews tag.

的 STEP：3 您应该在Xcode中打开您的应用程序。以下是要遵循的步骤：

a）转到项目文件夹

b）打开ios文件夹

c）转到.xcodeproj作为扩展名的文件，在我的例子中是splasScreenTutorial.xcodeproj

d）在Xcode中打开此文件。

e）删除launchScreen.xib文件。

f）单击splashScreenTutorial文件夹，然后转到TARGETS部分

g）单击Xcode左上角的“常规”选项卡，然后向下滚动到“应用程序图标”和“启动图像”

h）转到“启动图像源”，然后单击“使用资产目录”。点击迁移。

i）从启动屏幕文件中删除文本LaunchScreen。

j）返回项目文件夹并打开Images.xcassets文件。你应该看到AppIcon和LaunchImage。

k）接下来，单击LaunchImage，最后，将具有不同大小的闪屏图像拖到“启动图像”框中。

Drag the images like this.

测试启动画面 a）要查看更改，如果您最初运行了应用程序，则需要从模拟器中删除该应用程序。

b）要删除应用程序，请单击模拟器栏上的“硬件”菜单，然后转到“主页”。

c）点按并按住要删除的特定应用图标，然后点击图标上的X号。

d）使用react-native run-ios再次运行您的应用程序

You can see your Splash Screen

Answer 8

如果您想使用现有的Launch Screen .xib文件，React Native最初已设置，但使用您自己的徽标和背景颜色（并且没有任何React Native默认文本），您可以按照此处的说明进行操作：{ {3}}

Answer 9

如果您在React的帮助下创建了一个Launch屏幕，那么您应该在iOS Xcode的LaunchScreen.xib文件中添加相同的内容，以便您可以截取屏幕截图并将其添加为Images.xcassets中的图像。 / p>

打开LaunchScreen，然后在Xcode中右侧面板的对象库视图中添加UIImageView。

向视图添加尾随，前导，下限和顶部约束。如下图所示 -

不要忘记将UIImageView ContentMode更改为AspectFit，以便在应用运行时它看起来相同。

之后，你需要在AppDelegate中添加代码，这样你才能获得白屏。代码是 -

 UIView* launchScreenView = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];
 launchScreenView.frame = self.window.bounds;
 rootView.loadingView = launchScreenView;

您可以参考 - https://facebook.github.io/react-native/docs/running-on-device.html#pro-tip

Answer 10

对于那些仍然遇到问题的人来说，在启动iOS Launch屏幕之前，接受的答案中还有一个步骤缺失。

在项目文件夹中打开Info.plist并删除＆＃34;主nib文件基本名称＆＃34;键。然后，重建，希望问题消失。

Answer 11

在XCode 10.1和react-native 59.2上对我来说，我必须经过之后的附加步骤，已经添加了图像，情节提要和1张通用图像。

右键单击图像，单击Show in Finder，然后编辑您的Contents.json文件
将图像添加到2x和3x部分
使用“统治者”菜单转到“启动屏幕”情节提要
确保仅打开内侧红色箭头，而不打开外侧红色箭头
点击“安全区域相对保证金”

现在，图片应该在所有尺寸的iPhone上居中（已通过纵向测试）。

Answer 12

采用上述解决方案后，我的应用陷入了启动画面，因此我执行了以下7个步骤，在ios上添加了自定义启动画面。

打开Xcode并在项目中找到LaunchScreen.xib文件（请注意，这是ios中默认显示的屏幕）
要删除/编辑屏幕上的文本，请单击它并根据需要进行必要的更改。
要更改背景颜色，请在右侧栏上找到以下图标，然后单击最左上角的小图标按钮（从左数第四个按钮）（当您悬停时，它将显示“显示属性检查器”）

现在您已经知道如何更改背景颜色，让我们将图像添加到“启动画面”中，然后单击以下按钮，然后从列表中选择“图像”视图，然后将其拖放到任意位置。启动画面。

现在，我们必须将图像添加到Images.xcassets中，以便我们可以在LaunchScreen.xib中引用它以转到Images.xcassets。单击+按钮，然后单击import，然后添加要在初始屏幕中显示的图像。在AppIcon下，您会看到图片文件名。这是我们将在LaunchScreen.xib
现在我们必须引用在LaunchScreen.xib文件中添加的图像，因此导航回到LaunchScreen.xib并单击我们先前添加的image view并在右上角您会看到很多选择。点击第一个显示为image的图片，然后选择您在步骤5中导入的图片

清理项目并运行react-native run-ios，您应该看到所做的更改。

Answer 13

您应将启动屏幕图像源设置为图像集。然后删除LauncScreen.xib文件。然后在您的项目中进行全局搜索并删除对LaunchScreen.xib的所有引用（查看整个项目。我使用sublime文本编辑器，因此它的cmd + shift + f）它应该可以工作。

React Native

13 个答案:

要求

安装