RNBootSplash.hide() 不会隐藏 iOS 上的启动画面答案

【问题标题】：RNBootSplash.hide() does not hide the splash screen on iOSRNBootSplash.hide() 不会隐藏 iOS 上的启动画面
【发布时间】：2020-10-06 09:44:43
【问题描述】：

我正在使用 react-native-bootsplash (2.2.6) 包在我的 React Native (0.63.2) 应用程序中显示启动画面。

它适用于 Android，但不适用于 iOS（物理 iPhone 8、iOS 14，但也不适用于模拟器）。

当我记录包导入时，我确实看到这两种方法（show 和hide）都存在。但是，调用它没有任何区别。

我在 componentDidMount 生命周期和 componentDidCatch 中调用它。因为我认为它可能与树下的组件有关，所以我只是渲染了一个 View 而不是我的实际应用程序，它仍然无法正常工作。

这是我的 AppDelegate.m 文件和 AppDelegate 实现：

#import "AppDelegate.h"

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

#import <GoogleMaps/GoogleMaps.h>

#import <FBSDKCoreKit/FBSDKCoreKit.h>

#import <Firebase.h>

#import <RNCPushNotificationIOS.h>
#import <UserNotifications/UserNotifications.h>

#import "RNBootSplash.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

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  if ([FIRApp defaultApp] == nil) {
    [FIRApp configure];
  }
  [GMSServices provideAPIKey:@"MY_API_KEY"];// add this line using the api key obtained from Google Console

  [[FBSDKApplicationDelegate sharedInstance] application:application
                            didFinishLaunchingWithOptions:launchOptions];

#ifdef FB_SONARKIT_ENABLED
  InitializeFlipper(application);
#endif

  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"BUILDS"
                                            initialProperties:nil];

  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
  UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];

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

  // I added the following 3 lines per react-native docs against blinking issue when Splash Screen is hiding (I used react-native-splash-screen package before.)

  UIStoryboard *sb = [UIStoryboard storyboardWithName:@"BootSplash" bundle:nil];
  UIViewController *vc = [sb instantiateInitialViewController];
  rootView.loadingView = vc.view;

  center.delegate = self;
  
  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView]; // <- initialization using the storyboard file name
  return YES;
}

这是我的index.js（注释掉了真正的应用，只使用了一个带有文本的空视图）

import 'react-native-gesture-handler'
if (__DEV__) {
    import('./ReactotronConfig').then(() => console.log('Reactotron Configured'))
}

import { AppRegistry } from 'react-native';
// import App from './src/app/App';
import { name as appName } from './app.json';


import RNBootSplash from 'react-native-bootsplash'
import React, { Component } from 'react'
import { Text, View } from 'react-native'

export default class App extends Component {
    componentDidMount() {
        RNBootSplash.hide()
    }

    render() {
        return (
            <View style={ { flex: 1, justifyContent: 'center', alignItems: 'center' } } >
                <Text> textInComponent </Text>
            </View>
        )
    }
}


AppRegistry.registerComponent(appName, () => App);
console.disableYellowBox = true;

【问题讨论】：

标签： react-native splash-screen

【解决方案1】：

我不知道为什么它不起作用以及为什么它现在起作用，但是注释掉我在问题中提到的行解决了这个问题。我刚刚注释掉了以下几行：


UIStoryboard *sb = [UIStoryboard storyboardWithName:@"BootSplash" bundle:nil];
UIViewController *vc = [sb instantiateInitialViewController];
rootView.loadingView = vc.view;

【讨论】：

【解决方案2】：

您可能会通过 AppDelegate.m 中的某些代码多次显示启动画面

例如，以下将保持启动画面显示。最好用 BootSplash 代码隐藏/替换它。

UIStoryboard *sb = [UIStoryboard storyboardWithName:@"Launch Screen" bundle:nil];
UIViewController *vc = [sb instantiateInitialViewController];
rootView.loadingView = vc.view;

更新到

[RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView];

确保也隐藏在代码中，例如

RNBootSplash.hide({ fade: true });

【讨论】：