React-Native iOS通过Fastlane部署时本地图片不显示问题

系统环境 #

System:
    OS: macOS 13.0.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 409.86 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.7.0 - /opt/homebrew/bin/node
    Yarn: Not Found
    npm: 9.5.0 - /opt/homebrew/bin/npm
    Watchman: 2023.03.06.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.12.0 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9123335
    Xcode: 14.1/14B47b - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.12 - /usr/bin/javac
  npmPackages:
    u/react-native-community/cli: Not Found
    react: 18.0.0 => 18.0.0 
    react-native: 0.69.7 => 0.69.7 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

问题描述 #

React-Native iOS应用通过Fastlane发布时，本地图片无法正常显示，但在Xcode中使用Release scheme构建、或通过Xcode归档推送至App Store Connect时，图片均能正常加载。资产文件夹已在构建脚本中声明，且存在于Xcode Build Phases的Copy Resources环节中。

构建脚本 #

react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios' --assets-dest ./ios

Fastfile代码 #

default_platform(:ios)

platform :ios do
  desc "Push a new beta build to TestFlight"
  lane :beta do
    increment_build_number(xcodeproj: "myApp.xcodeproj")
    get_certificates( # Create or get certificate, and install it
      output_path: "./builds" # Download certificate in the build folder (you don't need to create the folder)
    )
    get_provisioning_profile( # Create or get provisioning profile
      output_path: "./builds",  # Download provisioning profile in the build folder
      filename: "provisioning.mobileprovision" # Rename the local provisioning profile
    )
    update_project_provisioning( # Set the project provisioning profile (related in Xcode to the General > Signing Release section)
      xcodeproj: "myApp.xcodeproj",
      target_filter: "myApp", # Name of your project
      profile: "./builds/provisioning.mobileprovision",
      build_configuration: "Release"
    )
    update_project_team( # Set the right team on your project
      teamid: CredentialsManager::AppfileConfig.try_fetch_value(:team_id)
    )
    build_app(
      workspace: "myApp.xcworkspace", 
      scheme: "myApp",    
      clean: true,
      export_method: "app-store",
      export_options: {
        provisioningProfiles: {
            CredentialsManager::AppfileConfig.try_fetch_value(:app_identifier) => CredentialsManager::AppfileConfig.try_fetch_value(:app_identifier) + " AppStore" # Value of this parameter is the name of the Provisioning Profile. By default, it will be "{bundleId} AppStore"
        }
      },
      build_path: "./builds",
      output_directory: "./builds"
      )
    upload_to_testflight
  end
end

解决方案 #

1. 在Fastlane流程中提前执行资源打包 #

你的Fastfile目前未执行react-native bundle命令生成JS包和资源文件，而Xcode构建时会通过内置的Run Script自动完成这一步。Fastlane配置的clean: true会清空之前的构建产物，导致缺失最新的资源文件。

修改beta lane，在build_app步骤前添加资源打包命令：

lane :beta do
  increment_build_number(xcodeproj: "myApp.xcodeproj")
  # 新增：执行React Native资源打包
  sh("react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios' --assets-dest ./ios")
  
  get_certificates(...)
  # ... 其余原有步骤 ...
  
  build_app(...)
  upload_to_testflight
end

2. 验证Xcode资源拷贝配置 #

确认Xcode Build Phases的Copy Bundle Resources中包含：

• main.jsbundle文件
• 由react-native bundle生成的assets文件夹（位于ios目录下）

若assets文件夹未自动添加，可手动拖入Xcode项目，并勾选"Copy items if needed"和对应的target。

3. 检查build_app参数一致性 #

• 确保build_app的scheme和build_configuration与Xcode中正常工作的Release配置完全一致
• 若项目使用CocoaPods，可尝试在build_app中添加use_cocoapods: true参数（RN 0.69+版本通常无需额外配置，但可用于排查）

4. 临时禁用clean排查问题 #

将build_app中的clean: true改为clean: false，构建后验证图片是否正常显示。若恢复正常，说明clean操作删除了未重新生成的资源文件，此时需确保资源打包命令在clean后执行。

内容的提问来源于stack exchange，提问作者Alicklaz