在 React Native 中使用 Google Places 自动完成组件

Google 提供了大量用于访问其地图服务的 API，其中之一是 Places API 。 Places API 主要为您提供有关使用 HTTP 请求的地点的信息。 您可以获得有关本地地址、城镇、城市、地区、餐厅或任何其他地方的所有信息，包括其坐标。

Places API 包含大量功能，例如返回与搜索字符串相关的地点列表、提供地点照片等等。 它最常用和最常用的功能之一是自动完成服务。

使用自动填充服务，Google 可以通过 API 自动填写正在搜索的地点的地址或名称。 因此，例如，当您的用户输入他们想要订购的餐厅名称时，您可以根据他们输入的内容为他们提供建议。

在本文中，我们将了解如何在 React Native 中使用自动完成服务。 但是，我们不必直接使用 Places API，因为 React Native 包名为 react-native-google-places-autocomplete可以为我们处理这个。

那么，让我们看看我们如何使用 react-native-google-places-autocompleteReact Native 项目中的包，以及它的一些关键功能以及我们如何自定义它以适应我们的项目。 我们将涵盖：

• 设置 Google Places API

  • 创建 Google Cloud 项目

  • 为 Google Places API 启用计费

  • 启用所需的 API

  • 创建 API 密钥

• 使用

  react-native-google-places-autocomplete

  • 设置一个 React Native 项目

  • 保护您的 API 密钥

  • 处理来自 Google Places API 的响应

  • 使用预定义的地点进行搜索

  • 使用自定义文本输入组件

  • 造型你的 GooglePlacesAutocomplete零件

  • 将结果限制在一个国家/地区

  • 获取输入值

  • 获取当前位置

设置 Google Places API

这 react-native-google-places-autocompletepackage 只是访问 Places API 的媒介。 如果不先设置 Google Cloud 项目以使用 Places API，它将无法运行。 因此，让我展示如何通过四个步骤做到这一点：

1. 创建项目

2. 启用计费

3. 启用所需的 API

4. 创建 API 密钥

让我们从创建一个 Google Cloud 项目开始。

创建 Google Cloud 项目

如果没有 Google Cloud 项目，我们将无法使用任何 Google API 服务。 前往 Google Cloud Console并注册。 如果您还没有，请

您将登陆上图所示的页面。 如果您之前没有创建过项目，请单击“创建或选择项目”按钮。 一个模态将立即弹出。 点击右上角的“新建项目”。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验 了解更多 →

---

将加载一个新页面，要求您输入项目名称和位置——“位置”表示项目应属于哪个组织。 您可以将位置保留为“无组织”，然后为您的项目输入一个名称。

最后，单击“创建”以创建项目。 然后，您可以选择项目或访问 项目页面 以查看您的项目列表。

为 Google Places API 启用计费

Google Places API 并非永远免费。 Google 使用即用 即付定价模式 。 但是您提出的前几个请求每个月都是免费的。

Google 强制要求您 启用结算功能。 在使用 Places API 之前为您的项目

前往 计费页面 ，然后选择您要为其启用计费的项目。 将弹出一个模式，如果您还没有，只需单击“创建结算帐户”。

按照 Google 的官方指南创建一个结算帐户。

启用所需的 API

您只需启用 Places API 和 Geocoding API 即可使用 react-native-google-places-autocomplete包裹。 接下来让我们这样做。

前往您的 项目仪表板 ，它应该如下所示：

如果它看起来不像上图，请确保选中侧边栏中的“启用 API 和服务”。 接下来单击导航栏上的“启用 API 和服务”。 它将带您进入 API 库页面：

搜索“Places API”并单击结果。 下一页包含有关 Places API 的信息，包括定价信息和为您的项目启用 API 的按钮。 单击“启用”按钮，就可以了。

如果您尚未为您的项目启用计费，当您尝试启用 Places API 时，系统会提示您这样做。

之后，返回 API 库页面 并启用 Geocoding API。

创建 API 密钥

这是我们在使用该软件包之前必须采取的最后一步。 转到您的 API 仪表板 。 在左侧边栏中，选择“凭据”选项。

单击顶部导航栏中的“创建凭据”，然后选择“API 密钥”。 这将为您的项目创建一个 API 密钥。 使用此 API 密钥，您只能访问已启用的 API。 复制 API 密钥并将其存储在安全的地方。

您可能会注意到 API 密钥旁边的警告图标。 重要的是你要注意它。 Google 建议您 将 API 密钥 仅限于您的应用程序。 否则，如果您未能将 API 密钥保密，那么 API 密钥对于任何其他应用程序或网站都将毫无用处。

这主要用于生产目的。 因为我们只是要测试的功能 react-native-google-places-autocomplete包，没有必要限制密钥。

使用 react-native-google-places-autocomplete

这 react-native-google-places-autocompletenpm 包提供了一个可自定义的组件，用于使用 Google Places 自动完成服务。

它还使用 Places Details 服务提供有关搜索地点的更多详细信息，包括用户评论和坐标，以及 ）的Geocoding API 。 用于将可读地