首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >React原生/XCode 12.4/iOS模拟器-应用程序启动时的黑色屏幕

React原生/XCode 12.4/iOS模拟器-应用程序启动时的黑色屏幕
EN

Stack Overflow用户
提问于 2021-03-26 04:15:15
回答 1查看 1.9K关注 0票数 1

问题:

成功构建后,没有错误记录,应用程序打开到标准的LaunchScreen.storyboard,但紧接着是一个黑色的屏幕。Metro仍然加载,应用程序的代码进入登录屏幕,但是黑色屏幕仍然存在,应用程序对输入没有反应。

我使用的:

  • 硬件: iMac (Retina 5K,27英寸,2015年底)
  • OS: macOS BigSur iOS模拟器iPhone 12 (14.4)
  • 测试电话: iPhone 7 (14.4)
  • XCode Version 12.4 (12D4e)

f 215

相关一揽子计划:

代码语言:javascript
运行
复制
"react": "17.0.1",
"react-native": "0.64.0",
"@react-navigation/bottom-tabs": "^5.11.8",
"@react-navigation/drawer": "^5.12.4",
"@react-navigation/material-bottom-tabs": "^5.3.14",
"@react-navigation/native": "^5.9.3",
"@react-navigation/stack": "^5.14.3",
"react-native-gesture-handler": "^1.10.3",
"react-native-screens": "^2.18.1",
"react-native-safe-area-context": "^3.2.0",
"react-native-material-dropdown": "^0.11.1",
"react-native-appearance": "^0.3.4",

AppleDelegate.m

代码语言:javascript
运行
复制
#import "AppDelegate.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <Firebase.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];
   }
  
#ifdef FB_SONARKIT_ENABLED
  InitializeFlipper(application);
#endif

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

  if (@available(iOS 13.0, *)) {
      rootView.backgroundColor = [UIColor blackColor];
  } else {
      rootView.backgroundColor = [UIColor whiteColor];
  }

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

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

@end

Index.js

代码语言:javascript
运行
复制
import App from './App';
import { name as appName } from './app.json';
import AsyncStorage from '@react-native-community/async-storage';

import { AppRegistry, Platform } from 'react-native';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';

AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));

App.js

代码语言:javascript
运行
复制
import React, { useState, useEffect } from 'react';
import { Root } from 'native-base';
import { AppearanceProvider } from 'react-native-appearance';

import AppContainer from './AppContainer.js'

export default App = () => {
return(
    <Root> 
      <AppearanceProvider>
        <AppContainer />
      </AppearanceProvider>
    </Root>
  )
}

AppContainer.js

代码语言:javascript
运行
复制
import { NavigationContainer, useNavigation } from "@react-navigation/native";

const AppContainer = () => {

    const { store, actions } = useContext(Context)


    const routeNameRef = useRef();
    const navigationRef = useRef();
    
    return(
        <NavigationContainer
            ref={navigationRef}
            onReady={() => routeNameRef.current = navigationRef.current.getCurrentRoute().name}
            onStateChange={() => {
                const previousRouteName = routeNameRef.current;
                const currentRouteName = navigationRef.current.getCurrentRoute().name
                actions.navigate.currentPage(currentRouteName)
                // Save the current route name for later comparision
                routeNameRef.current = currentRouteName;
        }}>
        <NavContainer />  // ALL PAGES HERE, STARTS WITH SPALH PAGE
        </NavigationContainer>
    )
}

export default Store(AppContainer);

我尝试过的:

1.背景=>中的程序导航功能--仍然是黑色和无响应的

即使我只看到了黑色的屏幕,我的控制台日志显示的反应-导航是有效的。首先,SPALSH页面打开,然后进入登录页面,如下所示。

终端控制台日志:

代码语言:javascript
运行
复制
 WARN  AsyncStorage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-async-storage/async-storage' instead of 'react-native'. See https://github.com/react-native-async-storage/async-storage
 LOG  Running "MyProject" with {"rootTag":11,"initialProps":{}}
 LOG  You are now in the SPLASH PAGE
 LOG  Null User Token
 LOG  You are now in the LOGIN PAGE
 LOG  You are now in the LOGIN PAGE

XCode调试日志:

代码语言:javascript
运行
复制
The default Firebase app has not yet been configured. Add `[FIRApp configure];` (`FirebaseApp.configure()` in Swift) to your application initialization. 
 7.9.0 - [Firebase/Core][I-COR000008] The project's Bundle ID is inconsistent with either the Bundle ID in 'GoogleService-Info.plist', or the Bundle ID in the options if you are using a customized options. To ensure that everything can be configured correctly, you may need to make the Bundle IDs consistent. To continue with this plist file, you may change your app's bundle identifier to 'MyProject'. Or you can download a new configuration file that matches your bundle identifier from https://console.firebase.google.com/ and replace the current one.
[Firebase/Analytics][I-ACS023007] Analytics v.7.9.0 started
[Firebase/Analytics][I-ACS023008] To enable debug logging set the following application argument: -FIRAnalyticsDebugEnabled
Firebase/Messaging][I-FCM001000] FIRMessaging Remote Notifications proxy enabled, will swizzle remote notification receiver handlers. If you'd prefer to manually integrate Firebase Messaging, add "FirebaseAppDelegateProxyEnabled" to your Info.plist, and set it to NO. Follow the instructions at:
https://firebase.google.com/docs/cloud-messaging/ios/client#method_swizzling_in_firebase_messaging
to ensure proper integration.
flipper: FlipperClient::addPlugin Inspector
flipper: FlipperClient::addPlugin Preferences
flipper: FlipperClient::addPlugin React
flipper: FlipperClient::addPlugin Network
  nw_protocol_get_quic_image_block_invoke dlopen libquic failed
 [native] Running application MyProject ({
    initialProps =     {
    };
    rootTag = 1;
})
 [native] RCTBridge required dispatch_sync to load RCTDevLoadingView. This may lead to deadlocks
  [Firebase/Analytics][I-ACS800023] No pending snapshot to activate. SDK name: app_measurement
  [Firebase/Analytics][I-ACS023012] Analytics collection enabled
 [Firebase/Analytics][I-ACS023220] Analytics screen reporting is enabled. Call +[FIRAnalytics logEventWithName:FIREventScreenView parameters:] to log a screen view event. To disable automatic screen reporting, set the flag FirebaseAutomaticScreenReportingEnabled to NO (boolean) in the Info.plist
 [javascript] AsyncStorage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-async-storage/async-storage' instead of 'react-native'. See https://github.com/react-native-async-storage/async-storage
 [plugin] AddInstanceForFactory: No factory registered for id <CFUUID 0x600002826e60> F8BB1C28-BAE8-11D6-9C31-00039315CD46
 [connection] nw_socket_handle_socket_event [C5.1:1] Socket SO_ERROR [61: Connection refused]
 [connection] nw_socket_handle_socket_event [C5.2:1] Socket SO_ERROR [61: Connection refused]
 [connection] nw_connection_get_connected_socket [C5] Client called nw_connection_get_connected_socket on unconnected nw_connection
 TCP Conn 0x60000183cb00 Failed : error 0:61 [61]
 [javascript] Running "MyProject" with {"rootTag":1,"initialProps":{}}
 [javascript] RCTBridge required dispatch_sync to load RCTDevLoadingView. This may lead to deadlocks
 [native] [GESTURE HANDLER] Initialize gesture handler for root view <RCTRootContentView: 0x7fb622c0f680; reactTag: 1; frame = (0 0; 0 0); gestureRecognizers = <NSArray: 0x60000214e3a0>; layer = <CALayer: 0x600002f8aca0>>
[native] Manifest does not exist - creating a new one.

(null)
 [javascript] You are now in the SPLASH PAGE
 [javascript] You are now in the LOGIN PAGE
 [javascript] You are now in the LOGIN PAGE

2.从新项目=>开始--白屏幕和错误

我试图解决这个问题,通过创建一个新的反应-本机项目从反应-本机网站.就在现在,我看到了一个白屏幕和一些错误。(见下文)

地铁控制台:

代码语言:javascript
运行
复制
Invariant Violation: Native module cannot be null.
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. 
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. 
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

XCode控制台:

代码语言:javascript
运行
复制
flipper: FlipperClient::addPlugin Inspector
flipper: FlipperClient::addPlugin Preferences
flipper: FlipperClient::addPlugin React
flipper: FlipperClient::addPlugin Network
nw_protocol_get_quic_image_block_invoke dlopen libquic failed
 [native] Running application MyTestApp ({
    initialProps =     {
    };
    rootTag = 1;
})
[javascript] Invariant Violation: Native module cannot be null.
 [connection]  Socket SO_ERROR [61: Connection refused]
[javascript] Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. 
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
[connection] nw_socket_handle_socket_event [C5.2:1] Socket SO_ERROR [61: Connection refused]
[connection] nw_connection_get_connected_socket [C5] Client called nw_connection_get_connected_socket on unconnected nw_connection
TCP Conn 0x6000005c4160 Failed : error 0:61 [61]
[native] Running surface LogBox ({
    initialProps =     {
    };
    rootTag = 11;
})
[javascript] Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. 
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
[native] Failed to mount LogBox within 1s

我不知道如何在这个问题上取得进展。

EN

Stack Overflow用户

回答已采纳

发布于 2021-03-27 19:56:29

最后,我不得不从GitHub存储库下载项目的早期版本。一切照常运转。

如果我要复制一个带有更新的npm包的项目,我需要在上构建最新的香草版本。(不只是复制和粘贴文件,

我个人在这里的教训是,不要固执,我一周内就能解决问题。保持一个内省的观点,回到我所知道的工作中去。

票数 0
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66810977

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档