如何在React Native中使用IOS的全屏图像创建LaunchScreen,该屏幕与iPad和所有iPhone兼容

我需要在我的启动屏幕上显示一个全屏图像,以便使用react native构建IOS App。我曾发表过一篇不同的文章,但其中大多数人都解释了以徽标为中心的垃圾屏幕,但没有一个人能正确解释适用于所有设备分辨率(包括iPad)的全屏斑点图像。

我已经创建了一个带有View和Imageview的LaunchScreen.xib文件,如下所示,但是它在iPad中会损坏,但是它在iPhone中有一定的适应性(尽管对于高分辨率iphone也有一些黑色阴影)

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15400" targetRuntime="iOS.CocoaTouch" propertyaccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" colorMatched="YES">
    <device id="retina5_5" orientation="portrait" appearance="light"/>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15404"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <objects>
        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
        <view contentMode="scaleAspectFit" id="iN0-l3-epB">
            <rect key="frame" x="0.0" y="0.0" width="414" height="716"/>
            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
            <subviews>
                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="Default" id="IGQ-OV-TUd">
                    <rect key="frame" x="0.0" y="-10" width="414" height="736"/>
                    <autoresizingMask key="autoresizingMask" flexibleMinX="YES" widthSizable="YES" flexibleMaxX="YES" flexibleMinY="YES" flexibleMaxY="YES"/>
                </imageView>
            </subviews>
            <color key="backgroundColor" red="0.30980392156862746" green="0.42745098039215684" blue="0.47843137254901957" alpha="1" colorSpace="calibratedRGB"/>
            <nil key="simulatedStatusBarMetrics"/>
            <modalPageSheetSimulatedSizeMetrics key="simulatedDestinationmetrics"/>
            <point key="canvasLocation" x="-20.289855072463769" y="107.60869565217392"/>
        </view>
    </objects>
    <resources>
        <image name="Default" width="682.66668701171875" height="910.66668701171875"/>
    </resources>
</document>

我在下面附加了View和ImageView的设置屏幕截图

如何在React Native中使用IOS的全屏图像创建LaunchScreen,该屏幕与iPad和所有iPhone兼容

如何在React Native中使用IOS的全屏图像创建LaunchScreen,该屏幕与iPad和所有iPhone兼容

我为三个不同的比例创建了3个虚拟图像,其Content.json在下面给出

{
  "images" : [
    {
      "idiom" : "universal","filename" : "Dummy.png","scale" : "1x"
    },{
      "idiom" : "universal","filename" : "Dummy@2x.png","scale" : "2x"
    },"filename" : "Dummy@3x.png","scale" : "3x"
    }
  ],"info" : {
    "version" : 1,"author" : "xcode"
  }
}

以上所有更改均未满足我的要求。我想知道是否需要为所有可能的设备创建全屏图像并将其包含在Content.json文件中。但是我应该在设置中设置什么宽度和高度(Scrrenshots)

请让我为我的要求提供正确的解决方案。

kay3320 回答:如何在React Native中使用IOS的全屏图像创建LaunchScreen,该屏幕与iPad和所有iPhone兼容

enter image description here

您只需要从顶部,左侧,右侧和底部将约束设置为0。这将自动适合所有设备。

这是我的LaunchScreen.xib的代码

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15400" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" colorMatched="YES">
    <device id="retina6_1" orientation="portrait" appearance="light"/>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15404"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <objects>
        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
        <view contentMode="scaleToFill" id="iN0-l3-epB">
            <rect key="frame" x="0.0" y="0.0" width="376" height="480"/>
            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
            <subviews>
                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="Ios" translatesAutoresizingMaskIntoConstraints="NO" id="mAG-fl-dgj">
                    <rect key="frame" x="0.0" y="0.0" width="376.00000000000023" height="480"/>
                </imageView>
            </subviews>
            <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
            <constraints>
                <constraint firstItem="mAG-fl-dgj" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" id="4Qq-Mv-2hX"/>
                <constraint firstItem="mAG-fl-dgj" firstAttribute="top" secondItem="iN0-l3-epB" secondAttribute="top" id="5G1-V8-uL4"/>
                <constraint firstAttribute="trailing" secondItem="mAG-fl-dgj" secondAttribute="trailing" id="61P-7a-W4I"/>
                <constraint firstAttribute="bottom" secondItem="mAG-fl-dgj" secondAttribute="bottom" id="b3b-rs-eay"/>
            </constraints>
            <nil key="simulatedStatusBarMetrics"/>
            <freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
            <point key="canvasLocation" x="472.46376811594206" y="454.6875"/>
        </view>
    </objects>
    <resources>
        <image name="Ios" width="788" height="1400"/>
    </resources>
</document>

  

如果要添加自定义启动画面,可以在以下位置手动创建   通过创建一个单独的组件来创建您的React应用程序。

,

您可以尝试使用此工具吗 generator-rn-toolbox

本文链接:https://www.f2er.com/2980541.html

大家都在问