React Native集成Firebase推送通知后iOS端react-native-maps显示空白白屏问题

我之前在给React Native项目集成Firebase推送后，也碰到过完全一样的情况——iOS端的react-native-maps突然变成空白白屏，Android却完全正常。后来排查出是Firebase与Google Maps在iOS端的静态框架链接、初始化顺序等方面的冲突，结合你提供的代码细节，给你几个针对性的解决方向：

方案一：重构AppDelegate，采用RN官方推荐的继承方式 #

你的AppDelegate目前是自定义实现ReactNativeDelegate，这种方式在RN 0.79+版本中可能会导致Google Maps的初始化逻辑没有被正确触发。改成继承官方的RCTAppDelegate可以避免很多手动配置的问题，同时调整初始化顺序：

import UIKit
import React_RCTAppDelegate
import GoogleMaps
import Firebase

@main
class AppDelegate: RCTAppDelegate {
  override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
    // 优先初始化Google Maps，再初始化Firebase，避免逻辑冲突
    GMSServices.provideAPIKey("YOUR_GOOGLE_MAPS_API_KEY")
    FirebaseApp.configure()
    
    // 调用父类初始化方法，确保RN启动流程正常
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

这种方式让RN的启动流程由官方框架处理，同时保证Google Maps的API Key在Firebase初始化前配置完成，从根源上避免两者的初始化逻辑互相干扰。

方案二：调整Podfile配置，解决静态框架依赖冲突 #

你的Podfile使用了静态框架链接，Firebase与Google Maps的静态依赖可能存在版本或链接方式的冲突，需要针对性调整：

1. 添加Firebase静态框架的全局配置
2. 明确指定与react-native-maps兼容的Google Maps版本
3. 额外处理Google Maps的静态链接编译设置

修改后的Podfile核心片段：

platform :ios, min_ios_version_supported
prepare_react_native_project!

# 开启静态框架，并配置Firebase以静态方式集成
use_frameworks! :linkage => :static
$RNFirebaseAsStaticFramework = true

target 'SpeedFleets' do
  config = use_native_modules!
  
  # 配置react-native-maps和兼容版本的Google Maps
  rn_maps_path = '../node_modules/react-native-maps'
  pod 'react-native-maps', :path => rn_maps_path
  # react-native-maps 1.21.0 兼容的Google Maps版本为7.4.0左右，可根据实际情况调整
  pod 'GoogleMaps', '~> 7.4.0'

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

  post_install do |installer|
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false
    )
    
    # 修复Google Maps静态链接的编译问题
    installer.pods_project.targets.each do |target|
      if target.name == 'GoogleMaps'
        target.build_configurations.each do |config|
          config.build_settings['CLANG_ENABLE_MODULES'] = 'YES'
        end
      end
    end
  end
end

修改完成后，执行彻底的清理和重新安装：

rm -rf Pods Podfile.lock ~/Library/Developer/Xcode/DerivedData
pod deintegrate
pod install --repo-update

方案三：再次验证Google Maps API Key的权限配置 #

虽然你提到已经检查过，但还是再确认几个关键细节：

• 确保API Key是专门为iOS平台创建的，并且在Google Cloud Console中添加了当前项目的完整Bundle ID（比如com.yourcompany.SpeedFleets）
• 确认该API Key已经启用了Maps SDK for iOS服务，没有设置不当的IP或权限限制
• 不要混用Android平台的API Key，两者的权限配置是独立的

方案四：确认RN端MapView的基础样式配置 #

最后再检查下RN代码中的MapView是否设置了明确的宽高样式，这是很多人容易忽略的细节：

import MapView from 'react-native-maps';

// 必须为MapView指定明确的宽高，否则可能显示空白
<MapView
  style={{ flex: 1, width: '100%', height: '100%' }}
  initialRegion={{
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  }}
  provider="google"
/>

按照这个顺序尝试，一般方案一和方案二就能解决问题——我当时就是通过调整AppDelegate的继承方式和Podfile的静态依赖配置解决的。

内容来源于stack exchange