ios - 在 react-native 中使用 iOS 启动屏幕作为应用程序背景

Question

我不知道如何使用 iOS 启动屏幕作为我的应用程序的背景。在 Android 上，它默认在背景中，您只需将 React Root View 的背景设置为透明即可显示它。

这就是我的 AppDelegate.m 现在的样子: https://github.com/facebook/react-native/blob/master/local-cli/templates/HelloWorld/ios/HelloWorld/AppDelegate.m

我试过 Peter Minarik 的这个解决方案:https://peterminarik.tumblr.com/post/153039209421/how-to-fix-the-initial-white-flash-in-your-react...但它使我的应用程序在启动时崩溃。没有错误，我在模拟器的日志中唯一能找到的是:

com.apple.CoreSimulator.SimDevice.4D60253D-C11F-4927-A3A3-3CC555432326[53234] (com.apple.videosubscriptionsd[20497]): Service exited with abnormal code: 1

彼得的解决方案:

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // ...

  // 1. Load the LaunchScreen from the xib file
  UIView *backgroundView = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] firstObject];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation ... ];

  // 2. Set the backgroundColor of the react view to be transparent
  rootView.backgroundColor = [UIColor clearColor];

  // ...

  // 3. Set the backgroundView as main view for the rootViewController (instead of the rootView)
  rootViewController.view = backgroundView;

  [self.window makeKeyAndVisible];

  // 4. After the window is visible, add the rootView as a subview to your backgroundView
  [backgroundView addSubview:rootView];

  // 5. Then make the rootViews frame the same as the backgroundView
  rootView.frame = backgroundView.frame;

  return YES;
}

@end

这是我的LaunchScreen.xib:

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="13771" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" colorMatched="YES">
    <device id="retina4_7" orientation="portrait">
        <adaptation id="fullscreen"/>
    </device>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13772"/>
        <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"/>
        <viewController id="CQd-0M-zUa">
            <layoutGuides>
                <viewControllerLayoutGuide type="top" id="JTh-uz-DhT"/>
                <viewControllerLayoutGuide type="bottom" id="Pi7-cH-HiC"/>
            </layoutGuides>
            <view key="view" contentMode="scaleToFill" id="kTS-qs-i9x">
                <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                <subviews>
                    <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" image="Image" translatesAutoresizingMaskIntoConstraints="NO" id="f0g-jh-Eny">
                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                    </imageView>
                    <textView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" fixedFrame="YES" textAlignment="natural" translatesAutoresizingMaskIntoConstraints="NO" id="S0g-wl-Fc0">
                        <rect key="frame" x="79" y="306" width="240" height="128"/>
                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                        <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                        <mutableString key="text">Lorem ipsum dolor sit...</mutableString>
                        <fontDescription key="fontDescription" type="system" pointSize="14"/>
                        <textInputTraits key="textInputTraits" autocapitalizationType="sentences"/>
                    </textView>
                </subviews>
                <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
            </view>
            <point key="canvasLocation" x="1327.5" y="531.5"/>
        </viewController>
    </objects>
    <resources>
        <image name="Image" width="375" height="667"/>
    </resources>
</document>

我不知道 Objective-C。你能帮帮我吗？

Answer 1

我已经想出了如何去做。之前的解决方案不起作用的原因是我的LaunchScreen 包含一个 View Controller ，而不是一个 View 。所以你不必创建一个新的 UIViewController 实例，只需使用这个实例并将 rootView 作为 subview 附加。

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"HelloWorld"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];

  UIViewController *rootViewController = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] firstObject];

  rootView.backgroundColor = [UIColor clearColor];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  self.window.rootViewController = rootViewController;

  [self.window makeKeyAndVisible];

  [rootViewController.view addSubview:rootView];

  rootView.frame = rootViewController.view.frame;

  return YES;

现在我的启动屏幕总是在应用程序的背景中。