当前位置：theitroad>React Native 中的 iOS 启动屏幕

React Native 中的 iOS 启动屏幕

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/34027270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-31 08:19:45 　来源:igfitidea点击:

iOS Launch screen in React Native

iosxcodereact-nativeasset-catalog

提问by JV Lobo

I'm working with a React Native app and I'm trying to set a customize launch screen but I'm not able to.

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

React Native creates a LaunchScreen.xib by default, so I've created a LaunchImage inside Images.xcassets:

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

LaunchImage in Images.xcassets

Images.xcassets 中的 LaunchImage

I've also read that I've to modify the "Launch Screen File" under "App Icons and Launch Images" in my options:

我还读到我必须在我的选项中修改“应用程序图标和启动图像”下的“启动屏幕文件”：

Launch Images options

启动图像选项

Once I've done that, my launch screen became totally black and when the app is loaded, there are both top and bottom black frames:

一旦我这样做了，我的启动屏幕就变成了全黑，当应用程序加载时，顶部和底部都有黑框：

enter image description here

在此处输入图片说明

So I don't know what I have to do to set my launch screen in my React Native project.

所以我不知道我必须做什么才能在我的 React Native 项目中设置我的启动屏幕。

I'll be grateful if someone can help me out with those troubles.

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

Thanks in advance.

提前致谢。

回答by JV Lobo

I was be able to solve the issue, with the help of this thread: Launch Image not showing up in iOS application (using Images.xcassets)

在此线程的帮助下，我能够解决该问题：启动图像未显示在 iOS 应用程序中（使用 Images.xcassets）

So I'm gonna explain it deeply in case it can help someone else.

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

First, you need to create certain images. What I used for that was this template and this webpage with an automatic generator: TiCons

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

enter image description here

在此处输入图片说明

When I downloaded my images, I took the ones inside assets/iphone folder, I only took those ones:

当我下载我的图像时，我在 assets/iphone 文件夹中取了那些，我只取了那些：

Also you need this Contents.jsonfile in the same folder, I got it from a friend:

你还需要在同一个文件夹中的这个Contents.json文件，我从朋友那里得到的：

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

So, at this point I created a folder called LaunchImage.launchimageinside Images.xcassetsfolder in my React Native project and save the images and the Contents.jsonfile inside it:

所以，在这一点上我创建了一个文件夹，名为LaunchImage.launchimage内Images.xcassets在我的阵营本地项目，并保存图像和文件夹Contents.json里面的文件：

enter image description here

在此处输入图片说明

Second, you have to open your project in Xcode and in "General" settings, below "App icons and Launch Images" we have to leave the option "Launch Screen File" empty (also we can delete the LaunchScreen.xibfile inside our project), and click in "Use Asset Catalog" after that. A modal will open, we choose to Migratethe catalog Images

其次，您必须在 Xcode 和“常规”设置中打开您的项目，在“应用程序图标和启动图像”下方，我们必须将选项“启动屏幕文件”留空（我们也可以删除项目中的LaunchScreen.xib文件） )，然后单击“使用资产目录”。一个模态将打开，我们选择迁移目录图像

enter image description here

在此处输入图片说明

Now, in the "Launch Images Source" selector, we can choose the folder we created before, LaunchImage(the one with our images):

现在，在“ Launch Images Source”选择器中，我们可以选择我们之前创建的文件夹LaunchImage（包含我们的图像的文件夹）：

enter image description here

在此处输入图片说明

We pick this instead of Brand Assetsand we can delete Brand Assetsfolder.

我们选择它而不是品牌资产，我们可以删除品牌资产文件夹。

At this point, we'll be able to run our React Native application with our custom launch images:

此时，我们将能够使用自定义启动图像运行我们的 React Native 应用程序：

enter image description here

在此处输入图片说明

I know it seems a little bit complex for an supposedly easy task, but after reading a lot about it this was the only way I could get my splash images working, so I wanted to share with the community.

我知道这对于一个看似简单的任务来说似乎有点复杂，但在阅读了很多关于它的内容后，这是我让我的启动图像工作的唯一方法，所以我想与社区分享。

回答by Dan G Nelson

Make sure to delete the app from the simulator. Then do a clean on your project.

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

回答by Train

I have been looking at these answers a lot in SO containing solutions for how to create a new launch screen. I mean let's think about it for a minute.

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

When we create a new react-native project what do we see for the launch screen?

当我们创建一个新的 react-native 项目时，我们在启动屏幕上看到了什么？

> Facebook's default launch screen

> Facebook 的默认启动画面

So that got me thinking, How did they do it?

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

They created a LaunchScreen.xib

他们创造了一个 LaunchScreen.xib

I think there must be a reason for this. So I went into theLaunchScreen.xiband made a change to the default text "React Native..." or what ever it said. I ran the app one more time to see that the launch screen reflected my edits.

我想这一定是有原因的。所以我进入LaunchScreen.xib并更改了默认文本“React Native ...”或它所说的任何内容。我再次运行该应用程序以查看启动屏幕是否反映了我的编辑。

Solution 1Edit the existing LaunchScreen.xib

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

Solution 2Create my own

解决方案 2创建我自己的

So I did, it took me longer to type up this answer than learning how to create my own. Both of these solutions are compatible with all the devices.

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

Step 1:

第1步：

Delete LaunchScreen.xib

删除 LaunchScreen.xib

step 2:

第2步：

click on images.xcassetsright click in the white space click **import**then select the image you want to add. enter image description here

单击鼠标images.xcassets右键单击空白处单击**import**然后选择要添加的图像。 在此处输入图片说明

step 3:

第 3 步：

Right click on your project's root folder and add a new file of type Launch Screenand name it what ever you want.

右键单击您项目的根文件夹并添加一个新的文件类型Launch Screen并将其命名为您想要的任何名称。

enter image description here

在此处输入图片说明

step 4

第四步

Click on your project in the left nav, go to Settings> Generaland under App Icons and Launch Images. Make sure Launch Image Sourceis blank and the Launch Screen Fileis the same name as your newly created launch screen.

在左侧导航中单击您的项目，转到Settings>General和下App Icons and Launch Images。确保Launch Image Source为空白，并且与Launch Screen File新创建的启动屏幕名称相同。

enter image description here

在此处输入图片说明

step 5

第 5 步

Click on your brand new file you created in step 2, drag an Image Viewor edit how ever it pleases you.

单击您在 中创建的全新文件step 2，拖动Image View或编辑您喜欢的任何内容。

enter image description here

在此处输入图片说明

Then that's it, you're done. You don't even need to clean the solution, just rebuild.

然后就是这样，你完成了。您甚至不需要清理解决方案，只需重建即可。

回答by Jeff Gu Kang

Update

更新

generator-rn-toolboxis deprecated. Use react-native-makeinstead.

generator-rn-toolbox已弃用。请改用react-native-make。

old Answer

旧答案

I recommend generator-rn-toolboxfor applying launch screen or main icon using on react-native. It is more simple and easy to use through cli as react-native.

我推荐generator-rn-toolbox用于在 react-native 上应用启动屏幕或主图标。通过 cli 作为 react-native 使用起来更加简单易用。

  • Do not need to open XCode.
  • Do not need to make a lot of image files for various resolutions.
  • Anytime change launch screen using one line commend.
  • 不需要打开 XCode。
  • 不需要为各种分辨率制作大量的图像文件。
  • 使用一行命令随时更改启动屏幕。

Requirements

要求

  • node >= 6
  • One squareimage or psd file with a size of more than 2208x2208px resolution for a launch screen(splash screen)
  • Positive mind ;)
  • 节点 >= 6
  • 一个分辨率超过2208x2208像素的方形图像或 psd 文件，用于启动屏幕（启动画面）
  • 积极的心态;)

Install

安装

  1. Install generator-rn-toolbox and yo
  2. npm install -g yo generator-rn-toolbox
  3. Install imagemagick brew install imagemagick

  4. Apply splash screen on iOS

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

    or Android

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

  1. 安装 generator-rn-toolbox 和哟
  2. npm install -g yo generator-rn-toolbox
  3. 安装 imagemagick brew install imagemagick

  4. 在 iOS 上应用启动画面

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

    或安卓

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

That's all. :)

就这样。:)

Source

来源

回答by Filth

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!

该模拟器中肯定有一些核心缓存正在进行，但是一旦完成 - 重新运行，您将看到该应用程序。确保对 xcode 模拟器和 react-native 模拟器都执行此操作！

回答by PoseLab

Make sure the 'Launch Screen File' select is empty: enter image description here

确保“启动屏幕文件”选择为空： 在此处输入图片说明

回答by Pankaj Sharma

Follow this link:

按照这个链接：

If you want to add a splash screen to my React Native application.Follow the process, the result will be all yours.

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

STEP:1First,I created a splashImageResource folder and added the launchScreen.xib file with the splash image.

步骤：1首先，我创建了一个 splashImageResource 文件夹并添加了带有初始图像的 launchScreen.xib 文件。

STEP:2change the code as written inside the subviews tag.with this code<subviews> <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" image="splash.png" translatesAutoresizingMaskIntoConstraints="NO" id="ZkI-RL-69Z"> </imageView> </subviews>

STEP:2更改 subviews 标签内所写的代码。用这个代码<subviews> <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" image="splash.png" translatesAutoresizingMaskIntoConstraints="NO" id="ZkI-RL-69Z"> </imageView> </subviews>

STEP:3You should open your app in Xcode. Here are the steps to follow:

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

a) Go to your project folder

a) 转到您的项目文件夹

b) Open the ios folder

b) 打开 ios 文件夹

c) Go to the file that has .xcodeproj as the extension, in my case it's splasScreenTutorial.xcodeproj

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

d) Open this file in your Xcode.

d) 在您的 Xcode 中打开此文件。

e) Delete the launchScreen.xib file.

e) 删除launchScreen.xib 文件。

f) Click on the splashScreenTutorial folder, then go to the TARGETS section

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

g) Click on the General Tab on the top-left corner of your Xcode and scroll down to App Icons and Launch Images

g) 单击 Xcode 左上角的 General 选项卡并向下滚动到 App Icons and Launch Images

h) Go to Launch Images Source and click Use Asset Catalog. Click on migrate.

h) 转到启动图像源并单击使用资产目录。点击迁移。

i) Remove the text LaunchScreen from Launch Screen File.

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

j) Go back to your project folder and open the Images.xcassets file. You should see AppIcon and LaunchImage.

j) 返回到您的项目文件夹并打开 Images.xcassets 文件。您应该会看到 AppIcon 和 LaunchImage。

k) Next, click on the LaunchImage, Finally, drag the splash screen images that you have of different sizes to the Launch Image box.

k) 接下来，单击 LaunchImage，最后，将您拥有的不同大小的启动画面图像拖到 Launch Image 框中。

Drag the images like this.

像这样拖动图像。

Test Splash Screena) To see the changes, you need to delete the app from your simulator if you have run the app initially.

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

b) To delete the app, click on the Hardware menu on your Simulator bar and go to Home.

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

c) Tap and hold down the particular app icon you want to delete, and click on the X sign on the icon.

c) 点击并按住您要删除的特定应用程序图标，然后单击图标上的 X 符号。

d) Run your app again using react-native run-ios

d) 使用 react-native run-ios 再次运行你的应用

You can see your Splash Screen

你可以看到你的启动画面

回答by Sara Inés Calderón

For me on XCode 10.1and react-native 59.2I had to go through the additional steps afteralready adding the images, storyboard and 1 universal image.

对我来说，在添加图像、故事板和 1 个通用图像后XCode 10.1，react-native 59.2我必须完成其他步骤。

  • Right click on the image, click Show in Finder, then edit your Contents.jsonfile
  • Add the image to the 2x and 3x sections
  • Go to the Launch Screen storyboard, with the "ruler" menu
  • Make sure only the insidered arrows are on, not the outsidered arrows
  • Click "Safe Area Relative Margins"
  • 右键单击图像，单击Show in Finder，然后编辑您的Contents.json文件
  • 将图像添加到 2x 和 3x 部分
  • 使用“标尺”菜单转到启动屏幕故事板
  • 确保只有内部红色箭头亮起，而不是外部红色箭头亮起
  • 单击“安全区域相对边距”

enter image description here

在此处输入图片说明

Image should now be centered on all size iPhones (tested on Portrait).

图像现在应该在所有尺寸的 iPhone 上居中（在纵向测试）。

回答by Hadi Mir

Upon following the above solutions my app was getting stuck on the Splash Screen so I did the following 7 steps to add the custom splash screen on ios.

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

  1. Open the Xcode and locate the LaunchScreen.xibfile in your project (Notice that this is the screen which is shown by default in ios)
  2. To remove/edit the text on the screen click on it and do the necessary changes as you like.
  3. To change the background color locate the following icons on the right side bar and click the little icon button at the very top, fourth from the left (when you hover, it'll say “Show the Attributes Inspector”)
  1. 打开 Xcode 并LaunchScreen.xib在您的项目中找到该文件（请注意，这是 ios 中默认显示的屏幕）
  2. 要删除/编辑屏幕上的文本，请单击它并根据需要进行必要的更改。
  3. 要更改背景颜色，请找到右侧栏上的以下图标，然后单击最顶部、左起第四个的小图标按钮（当您悬停时，它会显示“显示属性检查器”）

enter image description here

在此处输入图片说明

  1. Now that you have know how to change the background color, lets add image to the Splash screen to do that click on the following button and select the Image view from the list and drag and place it where ever you want it on the splash screen.
  1. 现在您已经知道如何更改背景颜色，让我们将图像添加到启动画面，单击以下按钮并从列表中选择图像视图，然后将其拖动并放置在启动画面上您想要的任何位置。

enter image description here

在此处输入图片说明

  1. Now we have to add the image to the Images.xcassetsso that we can reference it in the LaunchScreen.xibto do that goto Images.xcassets. click on +button followed by importand then add the image you want to show in the splash screen. Beneath AppIconyou'll see your image file name. This is the name we'll use to reference in our LaunchScreen.xib

  2. Now we have to reference the image we added in the LaunchScreen.xibfile so navigate back to LaunchScreen.xiband click the image viewthat we added earlier and on the right hand corner you will see bunch of options. click on first one that says imageand select the image which you imported in step 5

  1. 现在我们必须将图像添加到 中，Images.xcassets以便我们可以在LaunchScreen.xibgoto 中引用它 Images.xcassets。单击+按钮import，然后添加要在启动屏幕中显示的图像。在下方，AppIcon您会看到您的图像文件名。这是我们将用来在我们的LaunchScreen.xib

  2. 现在我们必须引用我们在LaunchScreen.xib文件中添加的图像，因此导航回LaunchScreen.xib并单击image view我们之前添加的图像，在右上角您将看到一堆选项。单击第一个说image并选择您在步骤 5 中导入的图像

enter image description here

在此处输入图片说明

  1. clean the project and run react-native run-iosand you should see the changes.
  1. 清理项目并运行react-native run-ios，您应该会看到更改。

回答by Ronit

If you create a Launch screen with the help of React then you should add the same thing in the LaunchScreen.xib file in iOS Xcode for that you can take a Screenshot and add it as an Image in the Images.xcassets.

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

Open LaunchScreen then add UIImageView in the View from Object Library from Right Panel in Xcode.

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

enter image description here

在此处输入图片说明

Add Trailing, Leading, Bottom and Top Constraints to the View. As Shown Below -

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

enter image description here

在此处输入图片说明

Don't Forget to change the UIImageView ContentMode as AspectFit so that it will look same when the app runs.

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

After That you need to add code in AppDelegate so that you don't get a white screen. The code is -

之后，您需要在 AppDelegate 中添加代码，以免出现白屏。代码是——

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

You can Refer - https://facebook.github.io/react-native/docs/running-on-device.html#pro-tip

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

相关推荐

ios 在 Swift 中以编程方式呈现模态视图控制器

ios 在 Swift 中以编程方式呈现模态视图控制器

导航栏未显示 iOS swift

导航栏未显示 iOS swift

ios Xcode 找不到头文件

ios Xcode 找不到头文件

ios 导航栏中未显示栏按钮项

ios 导航栏中未显示栏按钮项

相关推荐
最近更新
标签