react-native-maps iOS 使用 use_frameworks 时出现构建问题! :链接=>:静态

react-native-maps iOS build issues when using use_frameworks! :linkage => :static

主要错误:GMUHeatmapTileLayer.h not foundGMUKMLParser.h 未找到。

这是我的 Podfile 的样子:

source 'https://github.com/CocoaPods/Specs.git'
    
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
    
install! 'cocoapods', :deterministic_uuids => false
    
platform :ios, '10.0'
    
 
target 'myProject' do
  rn_maps_path = '../node_modules/react-native-maps';
  pod 'react-native-google-maps', path: rn_maps_path
  pod 'GoogleMaps'
  pod 'GooglePlaces'
  pod 'Google-Maps-iOS-Utils',


  config = use_native_modules!
  use_react_native!(
  :path => config[:reactNativePath],
  # to enable hermes on iOS, change `false` to `true` and then install pods
  :hermes_enabled => false
  )

  pod 'react-native-document-picker', :path => '../node_modules/react-native-document-picker'

  pod 'Google-Mobile-Ads-SDK',  '~> 7.69.0'

  pod 'GoogleSignIn', '~> 5.0.0'

  pod 'RNPhotoEditor', :path => '../node_modules/react-native-photo-editor/ios'

  use_frameworks! :linkage => :static

  pod 'iOSPhotoEditor', :git => 'https://github.com/prscX/photo-editor', :branch => 'master'


  post_install do |installer|
     installer.pods_project.targets.each do |target|
      if target.name.include?('iOSPhotoEditor')
        target.build_configurations.each do |config|
          config.build_settings['SWIFT_VERSION'] = '5'
        end
      end
      target.build_configurations.each do |config|
        config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
      end

      if target.name == 'react-native-google-maps'
        target.build_configurations.each do |config|
          config.build_settings['CLANG_ENABLE_MODULES'] = 'No'
        end
      end

      if (target.name&.eql?('FBReactNativeSpec'))
        target.build_phases.each do |build_phase|
          if (build_phase.respond_to?(:name) && build_phase.name.eql?('[CP-User] Generate Specs'))
            target.build_phases.move(build_phase, 0)
          end
        end
      end
    end
  end

  # Follow [Flipper iOS Setup Guidelines][https://fbflipper.com/docs/getting-started/ios-native/]
  # This is required because iOSPhotoEditor is implementated using Swift
  $static_framework = ['FlipperKit', 'Flipper', 'Flipper-Folly',
    'CocoaAsyncSocket', 'ComponentKit', 'Flipper-DoubleConversion',
    'Flipper-Glog', 'Flipper-PeerTalk', 'Flipper-RSocket', 'Yoga', 'YogaKit',
    'CocoaLibEvent', 'OpenSSL-Universal', 'boost-for-react-native']

  pre_install do |installer|
    Pod::Installer::Xcode::TargetValidator.send(:define_method, :verify_no_static_framework_transitive_dependencies) {}
    installer.pod_targets.each do |pod|
        if $static_framework.include?(pod.name)
          def pod.build_type;
            Pod::BuildType.static_library
          end
        end
      end
  end
end

react-native-photo-editor 添加需要 use_frameworks! :linkage => :static

的代码后

react-native-maps 找不到 google-maps-ios-utils 个文件。

GMUHeatmapTileLayer.h file not found

我已尝试手动添加 google-maps-ios-utils,如下所述:

https://github.com/googlemaps/google-maps-ios-utils/blob/b721e95a500d0c9a4fd93738e83fc86c2a57ac89/Swift.md

AirGoogleMaps 个文件仍然无法访问这些文件:

部门:

RN: 0.64.0
react-native-maps: 0.28
Google-Maps-iOS-Utils: 2.1.0
GoogleMaps: 3.5.0

有没有人成功地将 react-native-maps 与 google 地图和 use_frameworks! 一起使用?

我的 pod 文件有问题吗?

我怎样才能让这个 Google-Maps-iOS-Utils: 2.1.0 工作?

有没有人采取一些步骤来手动添加此库并使其在 RN 0.64 中使用桥接 header 与上述 use_frameworks 构建?

我也尝试了这个答案中的所有步骤,但出现了与打印屏幕图像相同的错误。

https://github.com/react-native-maps/react-native-maps/issues/3536#issuecomment-683563649

有关 node_modules 部门的更多信息:

"dependencies": {
"@react-native-async-storage/async-storage": "1.14.1",
"@react-native-community/geolocation": "2.0.2",
"@react-native-community/google-signin": "5.0.0",
"@react-native-community/hooks": "2.6.0",
"@react-native-community/image-editor": "2.3.0",
"@react-native-community/netinfo": "6.0.0",
"@sentry/browser": "6.2.3",
"@sentry/react-native": "2.4.0",
"@svgr/webpack": "4.2.0",
"@xobotyi/scrollbar-width": "1.9.5",
"abortcontroller-polyfill": "1.7.1",
"bfj": "6.1.1",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"color": "3.1.3",
"cross-fetch": "3.1.2",
"css-loader": "1.0.1",
"dotenv": "6.2.0",
"dotenv-expand": "4.2.0",
"file-loader": "2.0.0",
"html-webpack-plugin": "4.0.0-beta.4",
"leaflet": "1.7.1",
"lokijs": "1.5.11",
"mini-css-extract-plugin": "0.4.4",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.2.1",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-preset-env": "6.5.0",
"postcss-safe-parser": "4.0.1",
"query-string": "6.6.0",
"react": "17.0.1",
"react-dev-utils": "10.2.1",
"react-dom": "17.0.1",
"react-leaflet": "3.1.0",
"react-native": "0.64.0",
"react-native-admob": "2.0.0-beta.6",
"react-native-device-info": "8.0.7",
"react-native-document-picker": "5.0.2",
"react-native-fs": "2.16.6",
"react-native-google-places-autocomplete": "2.2.0",
"react-native-image-crop-picker": "0.36.0",
"react-native-image-size": "1.1.3",
"react-native-local-mongodb": "2.2.9",
"react-native-maps": "0.28.0",
"react-native-photo-editor": "^1.0.10",
"react-native-safe-area-context": "3.2.0",
"react-native-sensitive-info": "5.5.8",
"react-native-splash-screen": "3.2.0",
"react-native-svg": "12.1.0",
"react-native-vector-icons": "8.1.0",
"react-native-web": "0.15.0",
"react-router": "5.1.2",
"react-router-dom": "5.1.2",
"resolve": "1.10.0",
"rn-fetch-blob": "0.12.0",
"sass-loader": "7.1.0",
"style-loader": "0.23.1",
"terser-webpack-plugin": "1.2.3",
"ts-events": "3.4.0",
"typescript": "4.0.5",
"url-loader": "1.1.2",
"uuid": "3.4.0",
"webpack": "4.41.6",
"webpack-dev-server": "3.10.3",
"webpack-manifest-plugin": "2.2.0",
"workbox-webpack-plugin": "3.6.3"
},
"resolutions": {
  "typescript": "4.0.5"
},
"devDependencies": {
"@babel/core": "7.12.9",
"@babel/plugin-proposal-class-properties": "7.12.13",
"@babel/plugin-proposal-decorators": "7.12.13",
"@babel/plugin-transform-flow-strip-types": "7.12.13",
"@babel/plugin-transform-runtime": "7.12.15",
"@babel/polyfill": "7.12.1",
"@babel/runtime": "7.12.5",
"@carimus/metro-symlinked-deps": "1.1.0",
"@react-native-community/eslint-config": "2.0.0",
"@typescript-eslint/eslint-plugin": "4.19.0",
"@typescript-eslint/parser": "4.19.0",
"babel-jest": "26.6.3",
"babel-loader": "8.2.2",
"babel-plugin-module-resolver": "4.0.0",
"babel-plugin-named-asset-import": "0.2.3",
"babel-plugin-react-native-web": "0.15.0",
"babel-plugin-transform-remove-console": "6.9.4",
"babel-preset-react-app": "7.0.2",
"eslint": "7.19.0",
"jest": "26.6.3",
"jetifier": "^1.6.6",
"metro-react-native-babel-preset": "0.64.0",
"mockdate": "2.0.5",
"moment-timezone": "0.5.33",
"path-exists": "4.0.0",
"react-error-overlay": "6.0.6",
"react-test-renderer": "17.0.1",
"sftp-sync-deploy": "0.7.1",
"yarn-run-all": "3.1.1"
},

补充说明:

当我添加时构建过程中断(触发新的崩溃与 rn-maps 相关) https://github.com/prscX/react-native-photo-editor(需要 use_frameworks)。 如果我从 Podfile 中删除此模块和与之关联的额外设置,一切正常。

为了能够按照问题中的描述使用 react-native-mapsuse_frameworks 构建项目,我必须分叉 react-native-maps 库并替换

Google-Maps-iOS-Utils header 中的 Google_Maps_iOS_Utils 导入

lib/ios/AirGoogleMaps/AIRGoogleMap.m:

#import <Google_Maps_iOS_Utils/GMUKMLParser.h>
#import <Google_Maps_iOS_Utils/GMUPlacemark.h>
#import <Google_Maps_iOS_Utils/GMUPoint.h>
#import <Google_Maps_iOS_Utils/GMUGeometryRenderer.h>

lib/ios/AirGoogleMaps/AIRGoogleMapHeatmap.h中:

#import <Google_Maps_iOS_Utils/GMUHeatmapTileLayer.h>

如果有人知道比这更好的解决方案,我会很乐意接受它,如果在接下来的几天内添加答案,我将授予它问题所附的赏金。

我可能会保留叉子,直到 react-native-maps 更新为更新版本的 google-maps-ios-utils(在 v3 中,我认为问题已解决)。

"react-native-maps": "https://github.com/fdobre/react-native-maps#hot-fix-use-frameworks-ios",

TL;DR:这里正在 project 构建基本要求(带有用户框架的 react-native-maps 和 react-native-photo-editor)。

添加 AirMaps 和 AirGoogleMaps。

source

  1. 右键单击您的项目,然后单击 Add files to <projecjName>
  2. 转到 -> node_modules/react-native-maps/lib/ios/
  3. Select AirMaps 和 AirGoogleMaps
  4. 确保选项 create groups 和您的目标是 selected。

将 Airmaps 文件夹添加到库搜索路径:

  1. Goto target->build settings-> search for library search path 并为调试和发布添加以下行(带引号),"$(PODS_ROOT)/../../node_modules/react-native-maps/lib/ios/AirMaps"

添加google-maps-ios-utils:

根据这些官方instruction

  1. git clone https://github.com/googlemaps/google-maps-ios-utils 在 ios 文件夹上,名称不同。我们只需要 src 文件夹的内容。

  2. 在 XCODE 上,右键单击一个项目并创建一个名为 Google-Maps-iOS-Utils.

    的组
  3. 右键单击该文件夹,然后单击 Add files to ...

  4. Select 先前克隆的步骤 (i) 目录的 src 目录的所有文件夹。

  5. 确保选项已 selected“创建组”并且目标已 selected 作为您的应用程序目标。

  6. 删除提到的Google-Maps-iOS-Utils/Heatmap/HeatMapInterpolationPoint.swift filehere。 Select删除时删除引用。

  7. 转到项目 -> 构建设置 -> 搜索 preprocessor macros 并为调试和发布添加以下内容。

    HAVE_GOOGLE_MAPS=1

    HAVE_GOOGLE_MAPS_UTILS=1

重复符号错误

因为我们手动添加了AirGoogleMaps, AirMaps, Google-Maps-iOS-Utils 我们可能会报错:

Error: ld: 658 duplicate symbols for architecture x86_64

解决方案:

  1. Pods/Pods pods 部分删除 Google-Maps-iOS-Utils(select 选项“删除引用”)。因为我们手动添加了 Google-Maps-iOS-Utils Manually。

如果我们编译我们会得到 ld: 470 duplicate symbols for architecture x86_64.

  1. Pods/Development Pods 中删除 react-native-mapsreact-native-google-maps

(This is the repetitive task) 此处删除的所有 3 个文件夹将重新生成所有内容 pod install 执行。

更新 1:

这是我的 Pod 文件的样子:

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '10.0'

target 'myAwesomeProject' do
  rn_maps_path = '../node_modules/react-native-maps'
  pod 'react-native-google-maps', :path => rn_maps_path
  config = use_native_modules!

  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => false
  )

  target 'myAwesomeProjectTests' do
    inherit! :complete
    # Pods for testing
  end

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable the next line.
  use_flipper!()
  pod 'RNPhotoEditor', :path => '../node_modules/react-native-photo-editor/ios'
use_frameworks! :linkage => :static
pod 'iOSPhotoEditor', :git => 'https://github.com/prscX/photo-editor', :branch => 'master'

post_install do |installer|
installer.pods_project.targets.each do |target|
  flipper_post_install(installer) # as stated here https://fbflipper.com/docs/getting-started/react-native-ios/#react-native-063
  if target.name.include?('iOSPhotoEditor')
    target.build_configurations.each do |config|
      config.build_settings['SWIFT_VERSION'] = '5'
    end
  end
  if target.name == 'react-native-google-maps'
    target.build_configurations.each do |config|
      config.build_settings['CLANG_ENABLE_MODULES'] = 'No' # as mentioned here https://github.com/react-native-maps/react-native-maps/issues/3597#issuecomment-745026120
    end
  end
  if (target.name&.eql?('FBReactNativeSpec')) #as mentioned here https://github.com/software-mansion/react-native-screens/issues/842#issuecomment-812543933
    target.build_phases.each do |build_phase|
      if (build_phase.respond_to?(:name) && build_phase.name.eql?('[CP-User] Generate Specs'))
        target.build_phases.move(build_phase, 0)
      end
    end
  end
end
end 

$static_framework = ['FlipperKit', 'Flipper', 'Flipper-Folly',
'CocoaAsyncSocket', 'ComponentKit', 'Flipper-DoubleConversion',
'Flipper-Glog', 'Flipper-PeerTalk', 'Flipper-RSocket', 'Yoga', 'YogaKit',
'CocoaLibEvent', 'OpenSSL-Universal', 'boost-for-react-native']


pre_install do |installer|
Pod::Installer::Xcode::TargetValidator.send(:define_method, :verify_no_static_framework_transitive_dependencies) {}
installer.pod_targets.each do |pod|
    if $static_framework.include?(pod.name)
      def pod.build_type;
        Pod::BuildType.static_library
      end
    end
  end
end



  # post_install do |installer|
  #   react_native_post_install(installer)
  # end
end

更新 2:

如果以上回答未能解决您的问题。请按照我的 GitHub repo 上的说明逐步进行。

更新 3:

错误:'Google-Maps-iOs-Utils/GMUKMLParser.h' 找不到文件

解决方案:

react-native-maps官方指南says to follow this instructions on google-maps-ios-utils/Swift.md. However these instructions are vague. Here是比较清晰的说明集:

  1. 我们已经在上面克隆并添加了 google-maps-ios-utils。如果您还没有,请按照这些说明进行操作。

  2. 创建Swift桥接头

    1. 文件 > 新建 > 文件 > 头文件
    2. 通常名称是[项目名称]-Bridging-Header.h,但您可以随意命名。我在这个项目中只命名它 Header.h 因为它真的是一个简单的项目。
    3. 转到目标->构建设置->搜索Swift Compiler - General
      1. Objective-C Bridging Header中放入Header.h.
  3. 将以下行放在头文件中:

    #import "GMUMarkerClustering.h"
    #import "GMUGeoJSONParser.h"
    #import "GMUKMLParser.h"
    #import "GMUGeometryRenderer.h"
    
  4. 将以下行放入 Google-Maps-iOS-Utils/Clustering/GMUMarkerClustering.h

    #import "GMUCluster.h"
    #import "GMUClusterItem.h"
    #import "GMUClusterManager.h"
    #import "GMUDefaultClusterIconGenerator.h"
    #import "GMUDefaultClusterRenderer.h"
    #import "GMUGridBasedClusterAlgorithm.h"
    #import "GMUNonHierarchicalDistanceBasedAlgorithm.h"
    #import "GMUStaticCluster.h"
    
    #import "GQTPointQuadTree.h"
    
  5. (This is a repetitive task. you need to do this step every time "yarn install" executes)更改为 AirGoogleMaps/AIRGoogleMapHeatmap.h 文件中的 #import "GMUHeatmapTileLayer.h" 导入语句。

  6. (This is a repetitive task. you need to do this step every time "yarn install" executes) 将以下行放入 AirGoogleMaps/AIRGoogleMap.m

    #import "GMUKMLParser.h"
    #import "GMUPlacemark.h"
    #import "GMUPoint.h"
    #import "GMUGeometryRenderer.h"
    

更新 4:

在评论中,@Florin 提到了一个错误

Build input files cannot be found: '/ios/master/src/GeometryUtils/Internal/CatesianPoint.swift'...'

这是因为我不知道如何在git中使用子模块。因此,当克隆 google-maps-ios-utils 时,该回购不会被推送到我的 GitHub 回购(在此答案的第一行中提到)。该问题已解决。我刚刚添加了 ```src`` 文件夹内容,而没有在我的存储库中克隆整个存储库并推送更改。