带有Cocoapods和react-native-maps的Google Map-iOS

最近几天,当我试图将react-native-maps集成到用于传输连接Bileto的新移动应用程序中时,我正在寻找将其与Cocoapods集成的方法。 不幸的是,好的和新的教程很少。 通常,您会发现大约一年的文章,因此react-native-maps项目中只有READMEright。 这就是为什么我决定写两篇文章将Android和iOS上的Google Maps集成在一起的原因。 这是iOS部分。

让我们从头开始。 我们将使用React Native命令行工具创建一个新项目。 如果您从未安装过,只​​需输入npm i -g react-native-cli 。 然后导航到我们要在其中创建项目的文件夹。 要生成新的一种类型的react-native init MapExample 。 此命令将创建一个新的全新安装的React Native应用程序。

现在,只需转到项目文件夹。 就我而言,是cd MapExample 。 然后在这里运行react-native run-ios命令。 此命令将启动应用程序构建,并在模拟器上首次运行它。 我们将关闭模拟器以进行下一步…

现在是时候安装react-native-maps了。 使用yarn add-react-native-mapsnpm install react-native-maps命令运行地图软件包安装。 安装完成后, 您将无法借助react-native link react-native-maps 链接软件包。

整个软件包的依赖项将通过Cocoapods安装。 如果您没有安装它们,只需键入gem install cocoapods (您可能需要添加sudo权限)。

首先,我们需要进入ios文件夹cd ios 。 使用pod init初始化cocoapods及其初始文件是必要的。 现在,使用收藏夹编辑器打开Podfile cocoapods文件。 对我来说,它是VSCode,所以code Podfile 。 您看到的文件应如下所示。

我们需要在此链接的文档基础上更改此文件。 我们可以将样本Podfile完全复制到我们的Podfile中。 然后根据下一个屏幕截图对其进行编辑。 我们首先更改target然后删除'Folly',: subfield => "# {rn_path} /third-party-podspecs/Folly.podspec"下的行'Folly',: subfield => "# {rn_path} /third-party-podspecs/Folly.podspec"

完成此编辑后,我们将保存文件,然后可以关闭编辑器。 在控制台中,转到ios文件夹并运行pod install. 等待,直到所有内容都已安装。 安装后,我们会打个电话。 Please close any current Xcode sessions and use MapExample.xcworkspace for this project from now on 。 这意味着,如果我们继续使用xCode,则需要打开MapExample.xcworkspace而不是MapExample.xcodeproj

因为我们要使用Google地图,所以有必要编辑ios/MapExample/AppDelegate.m 。 通过以下代码片段将其打开( code ios/MapExample/AppDelegate.m ),最后进行编辑。

我希望本文能在React Native中实现Google Maps时节省很多时间。 如果觉得有用,请给这篇文章鼓掌或发表评论。

谢谢,祝大家愉快的本地编码。

Interesting Posts