在启动画面加载 iOS 之前反应原生黑屏

Posted 2023-02-24

【中文标题】在启动画面加载 iOS 之前反应原生黑屏

【英文标题】：React Native Black Screen before Splash Screen loads iOS

【发布时间】：2020-10-09 14:36:19

【问题描述】：

我已尝试通过大量 *** 问题和 Github 问题来解决此问题，但无济于事，因此我寻求帮助。

我创建了一个弹出（来自 expo）react-native 应用程序。我已经手动和通过 expo 的自动启动屏幕安装生成了启动屏幕。 SplashScreen 通过 XCode 正确链接（通过选择 SplashScreen.storyboard 文件作为 LaunchScreen）。 在 ios 上通过 TestFlight 打开应用程序时，加载的第一个屏幕是黑屏。大约半秒后，我的 SplashScreen 显示。我不确定为什么会发生这种情况，我尝试在删除应用程序后重新安装应用程序，在归档之前清理我的构建文件夹，删除情节提要文件并重新实现它，但似乎没有任何效果。我将在下面发布我的 AppDelegate 文件，以防出现问题。非常感谢任何建议。

#import "AppDelegate.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

#import <UMCore/UMModuleRegistry.h>
#import <UMReactNativeAdapter/UMNativeModulesProxy.h>
#import <UMReactNativeAdapter/UMModuleRegistryAdapter.h>
#import <EXSplashScreen/EXSplashScreenService.h>
#import <UMCore/UMModuleRegistryProvider.h>
#import <EXScreenOrientation/EXScreenOrientationViewController.h>

#ifdef FB_SONARKIT_ENABLED
#import <FlipperKit/FlipperClient.h>
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
#import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>

static void InitializeFlipper(UIApplication *application) 
  FlipperClient *client = [FlipperClient sharedClient];
  SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
  [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]];
  [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
  [client addPlugin:[FlipperKitReactPlugin new]];
  [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
  [client start];

#endif

@interface AppDelegate () <RCTBridgeDelegate>

@property (nonatomic, strong) UMModuleRegistryAdapter *moduleRegistryAdapter;
@property (nonatomic, strong) NSDictionary *launchOptions;

@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

#ifdef FB_SONARKIT_ENABLED
  InitializeFlipper(application);
#endif
  
  self.moduleRegistryAdapter = [[UMModuleRegistryAdapter alloc] initWithModuleRegistryProvider:[[UMModuleRegistryProvider alloc] init]];
  self.launchOptions = launchOptions;
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  #ifdef DEBUG
    [self initializeReactNativeApp];
  #else
    EXUpdatesAppController *controller = [EXUpdatesAppController sharedInstance];
    controller.delegate = self;
    [controller startAndShowLaunchScreen:self.window];
  #endif

  [super application:application didFinishLaunchingWithOptions:launchOptions];

  return YES;


- (RCTBridge *)initializeReactNativeApp

  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:self.launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"main" initialProperties:nil];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [[EXScreenOrientationViewController alloc] init];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];

  return bridge;
 

- (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge

  NSArray<id<RCTBridgeModule>> *extraModules = [_moduleRegistryAdapter extraModulesForBridge:bridge];
  // If you'd like to export some custom RCTBridgeModules that are not Expo modules, add them here!
  return extraModules;


- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 
 #ifdef DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
 #else
  return [[EXUpdatesAppController sharedInstance] launchAssetUrl];
 #endif


- (void)appController:(EXUpdatesAppController *)appController didStartWithSuccess:(BOOL)success 
  appController.bridge = [self initializeReactNativeApp];
  EXSplashScreenService *splashScreenService = (EXSplashScreenService *)[UMModuleRegistryProvider getSingletonModuleForClass:[EXSplashScreenService class]];
  [splashScreenService showSplashScreenFor:self.window.rootViewController];


@end

#import <Foundation/Foundation.h>
#import <EXUpdates/EXUpdatesAppController.h>
#import <React/RCTBridgeDelegate.h>
#import <UIKit/UIKit.h>

#import <UMCore/UMAppDelegateWrapper.h>

@interface AppDelegate : UMAppDelegateWrapper <RCTBridgeDelegate, EXUpdatesAppControllerDelegate>

@end

【参考方案1】：

在 XCode 12.0 和 iOS 14 上尝试以下步骤。

如果没有，请创建一个 LaunchScreen.storyboard。

设计视图，类似这样

并将 ViewController 的 storyboard id 更新为 LaunchViewController

使用以下代码更新 AppDelegate.m 的 didFinishLaunchingWithOptions

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

....
UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"LaunchScreen" bundle:[NSBundle mainBundle]];
  UIViewController *launchScrenViewController = [storyboard instantiateViewControllerWithIdentifier:@"LaunchViewController"];

  launchScrenViewController.view.frame = self.window.bounds;
  rootView.loadingView = launchScrenViewController.view;
..
return YES;

在 Xcode 中选择 Launch Screen 作为主界面和 Launch Screen。这是一个例子

这应该可以解决您的问题。

【讨论】：

谢谢你。我会试试看。 SplashScreen.storyboard（我已经创建并链接）和称之为 LaunchScreen 之间有什么区别吗？

我认为这并不重要。我的 RN 项目中已经有 LaunchScreen.storyboard，由 react-native init

创建

解决了吗？我面临着类似的问题。应用程序的第一个屏幕是反应本机屏幕，所有其他屏幕都是本机屏幕。在加载 RN 屏幕时，加载需要一些时间。虽然这会显示黑屏 2-3 秒。似乎是由于加载了js包，有什么办法解决这个问题吗？