如何在与 iPad 和所有 iPhone 屏幕兼容的 React Native 中为 IOS 创建带有全屏图像的 LaunchScreen
How to create LaunchScreen with a fullscreen Image for IOS in React Native which is screen compatible with iPad and all iPhones
我需要 我的启动画面上的全屏图像 用于 IOS 使用 React Native 构建的应用程序。我参考了不同的 post,但他们中的大多数都解释了中间带有徽标的垃圾屏幕,其中 none 对适合所有设备分辨率(包括 [=38=)的全屏启动图像给出了正确的解释].
我已经创建了一个 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 的设置截图
我已经为三个不同的尺度创建了 3 个虚拟图像,Content.json 如下所示
{
"images" : [
{
"idiom" : "universal",
"filename" : "Dummy.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"filename" : "Dummy@2x.png",
"scale" : "2x"
},
{
"idiom" : "universal",
"filename" : "Dummy@3x.png",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
以上所有更改都没有为我的要求提供适当的解决方案。我想知道是否需要为所有可能的设备创建全屏图像并将它们包含在 Content.json 文件中。但是我应该在设置中给出什么宽度和高度(Scrrenshots)
有人请抱抱我为我的要求提供正确的解决方案。
你能试试这个工具吗
generator-rn-toolbox
您只需要将约束从上、左、右、下设置为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>
If you want to add a custom Splash Screen you can create manually in
your react application by creating a separate component.
我需要 我的启动画面上的全屏图像 用于 IOS 使用 React Native 构建的应用程序。我参考了不同的 post,但他们中的大多数都解释了中间带有徽标的垃圾屏幕,其中 none 对适合所有设备分辨率(包括 [=38=)的全屏启动图像给出了正确的解释].
我已经创建了一个 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 的设置截图
我已经为三个不同的尺度创建了 3 个虚拟图像,Content.json 如下所示
{
"images" : [
{
"idiom" : "universal",
"filename" : "Dummy.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"filename" : "Dummy@2x.png",
"scale" : "2x"
},
{
"idiom" : "universal",
"filename" : "Dummy@3x.png",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
以上所有更改都没有为我的要求提供适当的解决方案。我想知道是否需要为所有可能的设备创建全屏图像并将它们包含在 Content.json 文件中。但是我应该在设置中给出什么宽度和高度(Scrrenshots)
有人请抱抱我为我的要求提供正确的解决方案。
你能试试这个工具吗 generator-rn-toolbox
您只需要将约束从上、左、右、下设置为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>
If you want to add a custom Splash Screen you can create manually in your react application by creating a separate component.