在 React Native 应用程序和 Expo 中使用 Google Maps 等原生模块答案

【问题标题】：Using native modules like Google Maps in a React Native app and Expo在 React Native 应用程序和 Expo 中使用 Google Maps 等原生模块
【发布时间】：2019-04-05 03:25:08
【问题描述】：

React Native 相对较新，我在我的应用程序中使用 AirBnb 的 react native 地图包，所有教程都谈到通过进入我的 iOS 文件夹并管理cocoapods 依赖等

我不完全记得了，但我使用 expo init 或 create-react-native-app 创建了我的应用程序，而且我没有 iOS 文件夹。从我读到的内容看来，我可以通过弹出我的应用程序来获取单独的文件夹。

这是我的实际问题：问题基本上是“我可以在 iOS MapView 中使用 Google 地图，并且仍然在 React Native 中编写我的应用程序并在 Xcode 模拟器和 Android 模拟器中的 Expo 中运行它，并且仍然有热/实时加载？”

您可以稍微抽象一下这个问题并将其表述为“我可以按照 MapView 教程中的说明使用本机依赖项，拥有 iOS 和 Android 文件夹，并且仍然在 React Native 中编写我的应用程序并运行它在两个模拟器中都有热/实时加载？”

（或者，一旦我使用原生的东西，我是否必须在 Swift/Java 和 Xcode/Android Studio 中编写代码？）

【问题讨论】：

标签： react-native

【解决方案1】：

正如世博会文档中所述，世博会已经包含一个谷歌地图地图视图。 https://docs.expo.io/versions/latest/sdk/map-view/

如果您没有使用 expo 创建应用程序，而只是使用 create-react-native-app 命令，您可以使用由 RN 社区维护的这个包：
https://github.com/react-native-community/react-native-maps

此包使用原生组件，因此您需要链接它（仅当您不使用 expo 时），然后您可以在屏幕中将其作为普通组件使用。

【讨论】：

谢谢 Rik，我会马上研究那个 expo 组件。你能多谈谈你的最后一句话，包括如果我/do/使用expo该怎么办？世博会是热/实时重新加载的唯一方法吗？
不，您还将在 create-react-native-app 中进行热重载。当你使用 expo 时，你会得到很多你可能会在你的应用程序中预先包含的包。像地图、imagepicker 等。Expo 还可以让您更轻松地与同事分享您的原型应用程序或更轻松地在您的手机上进行测试。希望这为您解决了问题。
好吧，我不是在谈论使用expo init 构建，我是在谈论从 Expo 以外的其他地方运行应用程序。我以前实际上没有这样做过；我想你在 Xcode 中打开项目并从那里运行（这需要弹出吗？这可以追溯到我原来帖子的“实际”问题）。以这种方式运行时会热重载吗？
据我所知，这不是运行您的 react 本机应用程序的正确方法（我可能错了，我对 RN 也很陌生）。我只是通过运行命令react-native run-ios（或Android，取决于您要使用的操作系统）来运行我的应用程序。如果您的项目中没有 ios 或 Android 文件夹，那么您需要运行弹出命令，这将为您创建文件夹。请确保在运行 react-native run-ios 之前通过 xcode 构建您的应用程序，如果您跳过您可能会遇到一些问题。
正确。有时您需要在 xcode 等中工作，但前提是您想制作自己的原生组件（例如已经构建的地图）