React Native项目iOS模拟器显示空白白屏但Android运行正常的问题排查求助

阿华AIGC实验室

2026-4-7

大家好，我有个React Native项目在Android上运行完全正常，但在iOS模拟器里打开只显示空白白屏。用Xcode构建并运行时，能看到App启动了，但界面就是一片空白，完全没有内容加载出来。这个项目是从RN 0.69.3升级到0.74.5之后出现的问题，之前旧版本的iOS运行是正常的，现在卡在这里好几天了，求各位大佬帮忙排查下！

环境信息

React Native版本：0.74.5（从0.69.3升级而来）
iOS开发目标版本：13.4
Node.js版本：v18.20.8（通过NVM管理）
系统平台：macOS Sonoma (x86_64)
Xcode：针对iOS模拟器构建
Hermes：已启用（hermesEnabled=true）

Xcode控制台日志输出

warning: (x86_64) /Users/emres/Library/Developer/Xcode/DerivedData/mobile_1969-gfeqbzlnxklpkbamfxhvupxmknzj/Build/Products/Debug-iphonesimulator/mobile_1969.app/mobile_1969 empty dSYM file detected, dSYM was created with an executable with no debug info.
Invalidating <RCTCxxBridge: 0x10ca0d7d0> (parent: (null), executor: (null))
Failed to send CA Event for app launch measurements for ca_event_type: 0 event_name: com.apple.app_launch_measurement.FirstFramePresentationMetric
Failed to send CA Event for app launch measurements for ca_event_type: 1 event_name: com.apple.app_launch_measurement.ExtendedLaunchMetrics
nw_protocol_socket_set_no_wake_from_sleep [C2.1.1:2] setsockopt SO_NOWAKEFROMSLEEP failed [22: Invalid argument]

项目配置详情

AppDelegate.mm 代码

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  RCTAppSetupPrepareApp(application, false);
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  UIView *rootView = RCTAppSetupDefaultRootView(bridge, @"mobile_1969", nil, YES);

  if (@available(iOS 13.0, *)) {
    rootView.backgroundColor = [UIColor systemBackgroundColor];
  } 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"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

Podfile关键配置片段

platform :ios, '13.4'
install! 'cocoapods', :deterministic_uuids => false

# Hermes enabled
use_react_native!(
  :path => config[:reactNativePath],
  :hermes_enabled => true,
  :fabric_enabled => flags[:fabric_enabled],
  :app_path => "#{Pod::Config.instance.installation_root}/.."
)

Metro配置文件

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const defaultConfig = getDefaultConfig(__dirname);

const config = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg'],
  },
};

module.exports = mergeConfig(defaultConfig, config);

index.js入口文件

import React from 'react'
import 'react-native-gesture-handler'
import { AppRegistry } from 'react-native'
import App from './App'
import { name as appName } from './app.json'
import { Provider } from 'react-redux'
import { store, persistor } from './src/store'
import { PersistGate } from 'redux-persist/integration/react'
import ErrorBoundary from './src/components/error/ErrorBoundary'

const Application = () => (
  <ErrorBoundary>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App/>
      </PersistGate>
    </Provider>
  </ErrorBoundary>
)

AppRegistry.registerComponent(appName, () => Application)

核心依赖版本

{
  "react": "18.2.0",
  "react-native": "0.74.5",
  "react-native-gesture-handler": "^1.10.3",
  "react-native-screens": "3.27.0",
  "react-native-safe-area-context": "^1.0.0",
  "@react-navigation/native": "^5.3.0",
  "@react-navigation/stack": "^5.3.2",
  "react-redux": "^7.2.0",
  "redux-persist": "^5.10.0"
}