React Native TypeScript iOS应用自定义启动页致95%启动崩溃求助

我正在开发一个React Native TypeScript iOS移动应用，该应用有95%的概率在启动时崩溃，经排查问题出在自定义启动页功能上。创建空项目逐步测试后，确认实现自定义启动页后立即出现崩溃。

已完成的操作：

• 安装react-native-splash-screen@3.3.0包
• 执行命令：cd ios、bundle install、bundle exec pod install
• 使用npx react-native run-ios --device "My Device"启动应用

通过Xcode完成的操作如下：

1. 将SVG文件拖入Images区域并命名为Splash
2. 配置LaunchScreen.storyboard：

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="21701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
    <device id="retina4_7" orientation="portrait" appearance="light"/>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21678"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--View Controller-->
        <scene sceneID="EHf-IW-A2E">
            <objects>
                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" image="Splash" translatesAutoresizingMaskIntoConstraints="NO" id="kAt-3h-SzH">
                                <rect key="frame" x="67" y="269" width="240" height="128"/>
                                <autoresizingMask key="autoresizingMask" flexibleMinX="YES" widthSizable="YES" flexibleMaxX="YES" flexibleMinY="YES" heightSizable="YES" flexibleMaxY="YES"/>
                            </imageView>
                        </subviews>
                        <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
                        <color key="backgroundColor" red="0.098039215686274508" green="0.098039215686274508" blue="0.098039215686274508" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="52.173913043478265" y="375"/>
        </scene>
    </scenes>
    <resources>
        <image name="Splash" width="60" height="60"/>
    </resources>
</document>

3. 修改AppDelegate.mm：

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>

// Added the line below
#import "RNSplashScreen.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"flexbox_tv_mobile";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};
  
  // Added the line below
  bool didFinish = [super application:application didFinishLaunchingWithOptions:launchOptions];
  
  // Added the line below
  [RNSplashScreen show];

  // Added the line below
  return didFinish;
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

@end

4. 修改App.tsx：

...

import SplashScreen from "react-native-splash-screen";

...


    componentDidMount(): void {
        SplashScreen.hide();
    
...

环境信息 #

• Xcode Version 14.3 (14E222b)
• iPhone 8 Plus设备 - iOS版本16.5.1 (c)

测试方式 #

创建新的空React Native TypeScript项目：npx react-native init <NAME> --template react-native-template-typescript，替换项目的ios文件夹内容后，测试应用是否崩溃。

内容的提问来源于stack exchange，提问作者aman