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

汤枫

2023-12-01

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，它将无法运行。因此，让我展示如何通过四个步骤做到这一点：

创建项目
启用计费
启用所需的 API
创建 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 。用于将可读地址转换为几何坐标（反之亦然

要继续阅读本文并查看此包的工作情况，请设置一个 React Native 项目。

设置一个 React Native 项目

对于我们的示例 React Native 项目，我们将为美食家创建一个应用程序来查找吃饭的地方。我们不会介绍构建应用程序的每一步，因为本文的主要重点是展示一些如何使用 react-native-google-places-autocomplete包裹。

前往您的终端并运行以下命令：

来自 LogRocket 的更多精彩文章：

不要错过 The Replay 来自 LogRocket 的精选时事通讯
了解 LogRocket 的 Galileo 如何消除噪音以主动解决应用程序中的问题
使用 React 的 useEffect 优化应用程序的性能
之间切换在多个 Node 版本
了解如何使用 AnimXYZ 为您的 React 应用程序制作动画
探索 Tauri ，一个用于构建二进制文件的新框架
比较 NestJS 与 Express.js

npx react-native init Foodies

如果你有一个 TypeError: cli.init is not a function使用上述命令创建 React Native 项目时出现问题，请同时卸载全局 react-native-cli和 react-native. 现在只重新安装全局 react-native.

现在让我们安装依赖项。我们现在只需要一个依赖项： react-native-google-places-autocomplete包裹。

npm install react-native-google-places-autocomplete

该包提供了一个组件，其中包含我们在应用程序中使用和自定义 Places API 所需的一切。让我们看一个基本的例子：

import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
import {apiKey} from './config'; // your google cloud api key

const App = () => {
  return (
    <SafeAreaView>
      <GooglePlacesAutocomplete
        placeholder="Type a place"
        query={{key: apiKey}}
      />
    </SafeAreaView>
  );
};

让我们回顾一下上面示例的一些重要部分。

GooglePlacesAutocomplete是用户输入地点名称的文本输入表单。当用户输入时，基于用户输入内容的建议地点模式将显示为下拉菜单。

查询道具是唯一需要的道具；如果没有它的 key 属性，自动完成包将无法使用 Places API。您需要导入您的 API 密钥并在此处使用它。此外，不要忘记在您的云项目上启用计费以使用地点和地理编码 API。

在 React Native 项目中存储敏感信息不是一种安全的做法。让我们讨论如何保护您的 API 密钥。

保护您的 API 密钥

中，这一点非常重要不要将 API 密钥存储在 React Native 项目。任何拥有您的 app bundle 的人都可以访问您的 API 密钥，因此这不是一种安全的存储方法。

您可以通过使用服务器来存储您的 API 密钥来解决此问题。这样当用户打开应用程序时，您只需向服务器发出请求以获取 API 密钥。

还有一些措施可以保护服务器中的 API 密钥。 Brad Traversy 有关保护 API 密钥的视频演示了如何执行此操作。

处理来自 Google Places API 的响应

来自 Google Places API 的第一组响应是自动完成建议。这 react-native-google-places-autocompletepackage 处理这组响应，所以我们不必担心它们。

但是，还有其他响应将由用户事件触发。例如，当一个建议的地址被按下时，用户的输入不再返回任何建议（即找不到地点）。这些回应必须由我们处理。

同样，自动完成包通过提供事件道具来处理这些响应，为我们完成了困难的部分。我们来看一个例子：

const App = () => {
  return (
    <SafeAreaView>
      <GooglePlacesAutocomplete
        placeholder="Type a place"
        query={{key: apiKey}}
        fetchDetails={true}
        onPress={(data, details = null) => console.log(data, details)}
        onFail={error => console.log(error)}
        onNotFound={() => console.log('no results')}
      />
    </SafeAreaView>
  );
};

这些新道具介绍—— onPress, onFail，和 onNotFound——至关重要。当使用像这样的 Places API 包时，您可以使用这些道具来回答以下问题：

当用户点击建议时会发生什么？
当搜索字符串没有结果时会发生什么？
从 API 获取数据失败时会发生什么？

自动完成包提供了用道具回答这些问题的方法。使用自定义函数处理响应取决于我们。好吧，让我们一个接一个地解决这些问题。

当用户点击建议时会发生什么？

当用户点击一个建议时，有关所选地点的信息将作为传递给函数的参数返回，然后传递给 onPress支柱。上例中的两个参数—— data和 details- 两者都构成了有关该地点的信息。

这 data参数返回有关地点的基本信息对象，例如描述或地址名称、国家、城市和其他详细信息。

这 details参数将返回与数据对象相同的对象，如果 fetchDetails道具是 false.

这 fetchDetails道具设置为 false默认情况下，但当设置为 true，这 details参数提供有关该地点的更多详细信息，包括几何形状。提供了一个完整的地点详细信息响应示例。 Google在他们的文档中

当搜索字符串没有结果时会发生什么？

用户很可能有时会键入搜索字符串但收不到任何结果。随着 onNotFound道具，我们可以让整个项目都意识到没有结果。然后，在您的应用程序中，您可以根据此响应处理它应该如何显示或应该或不应该发生什么。

例如，我们可以停用所有其他功能（例如继续下一步以订购食物）并显示一条自定义消息，指示没有结果。

或者，如果您只想提醒用户而不对应用程序中其他地方缺少结果做任何特别的事情，您可以使用 FlatList listEmptyComponent在没有找到结果时提醒用户。

您可以通过传入组件或元素来做到这一点，如下所示：

const App = () => {
  return (
    <SafeAreaView>
      <GooglePlacesAutocomplete
        placeholder="Type a place"
        onPress={(data, details = null) => console.log(data, details)}
        query={{key: apiKey}}
        fetchDetails={true}
        onFail={error => console.log(error)}
        onNotFound={() => console.log('no results')}
        listEmptyComponent={() => (
          <View style={{flex: 1}}>
            <Text>No results were found</Text>
          </View>
        )}
      />
    </SafeAreaView>
  );
};

由于上面的代码，如果用户输入了没有结果的内容，搜索栏下方将显示文本“No results were found”。

从 API 获取数据失败时会发生什么？

从 Places API 获取数据也很可能有时会导致错误。例如，Places API 可能会抛出自己的错误，因为您的 Google Cloud 项目或帐单邮寄地址存在配置问题。

这 onFail当 API 出现错误时，prop 返回错误，无论是在使用 Places API 还是 Geocoding API 时。

您可能会在此处遇到的一个非常常见的问题是，当您的项目未启用计费或其他一些与进行必要计费有关的问题时。

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

您可以使用用户最喜欢或访问最多的地方作为预定义的地方 GooglePlacesAutocomplete零件。

预定义的地点包含一个带有该地点信息的地址。您可以选择向用户显示您想要的地址或任何名称。

如果您使用预定义地点，当用户专注于文本输入以搜索地址时，预定义选项将作为自动完成建议弹出。

这是设置两个位置的方法 - Dominos Pizza和 Chicken Republic- 作为 favorite预定义地点的类型：

const App = () => {
  return (
    <SafeAreaView>
      <GooglePlacesAutocomplete
        placeholder="Type a place"
        onPress={(data, details = null) => console.log(data, details)}
        query={{key: apiKey}}
        fetchDetails={true}
        onFail={error => console.log(error)}
        onNotFound={() => console.log('no results')}
        predefinedPlaces={[
          {
            type: 'favorite',
            description: 'Dominos Pizza',
            geometry: {location: {lat: 48.8152937, lng: 2.4597668}},
          },
          {
            type: 'favorite',
            description: 'Chicken Republic',
            geometry: {location: {lat: 48.8496818, lng: 2.2940881}},
          },
        ]}
      />
    </SafeAreaView>
  );
};

在上面的代码中，描述是将显示给用户的名称。选择任何预定义选项后，您为该地点创建的对象将与 data和 details那个地方的参数。

对象不仅限于类型、描述和几何形状。您可以添加有关该地点的更多信息。

由于上面的代码，你应该看到这些 favorite甚至在用户开始输入之前，预定义的地点就会显示为建议。看下面的结果：

使用自定义文本输入组件

默认情况下， react-native-google-places-autocomplete包使用 React Native 的 TextInput文本输入组件。但是，您不会被包裹的选择所困扰

随着 textInputPropsprop，您可以使用您选择的任何自定义组件，例如 Input来自反应原生元素。

import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
import {apiKey} from './config'; // your google cloud api key
import {Input} from '@rneui/themed';

const App = () => {
  return (
    <SafeAreaView>
      <GooglePlacesAutocomplete
        placeholder="Type a place"
        onPress={(data, details = null) => console.log(data, details)}
        query={{key: apiKey}}
        fetchDetails={true}
        onFail={error => console.log(error)}
        onNotFound={() => console.log('no results')}
        textInputProps={{
          InputComp: Input,
        }}
      />
    </SafeAreaView>
  );
};

textInputProps是文本输入组件的所有 props 的对象。所以如果你使用 React Native 的 TextInput，您可以在此处使用特定于它的道具。例如：

const App = () => {
  return (
    <SafeAreaView>
      <GooglePlacesAutocomplete
        placeholder="Type a place"
        onPress={(data, details = null) => console.log(data, details)}
        query={{key: apiKey}}
        fetchDetails={true}
        onFail={error => console.log(error)}
        onNotFound={() => console.log('no results')}
        textInputProps={{
          autoFocus: true,
          blurOnSubmit: false,
        }}
      />
    </SafeAreaView>
  );
};;

上面 textInputProps 中使用的 props 都是 React Native 特有的 TextInput. 当您使用第三方库时，也会发生同样的事情。

造型你的 GooglePlacesAutocomplete零件

的样式默认 GooglePlacesAutocomplete组件的样式很好，因此它们对于您的应用程序可能已经足够了。

不过，您可以添加到默认样式以使它们适合您的应用程序。您还可以完全摆脱默认样式并从头开始完全自定义样式。

这 GooglePlacesAutocomplete组件有一个样式属性，用于设置所有组件的样式，从文本输入到下拉菜单。让我们看看它的实际效果：

const App = () => {
  return (
    <SafeAreaView>
      <GooglePlacesAutocomplete
        placeholder="Type a place"
        onPress={(data, details = null) => console.log(data, details)}
        query={{key: apiKey}}
        fetchDetails={true}
        onFail={error => console.log(error)}
        onNotFound={() => console.log('no results')}
        styles={{
          container: {
            flex: 0,
          },
          description: {
            color: '#000',
            fontSize: 16,
          },
          predefinedPlacesDescription: {
            color: '#3caf50',
          },
        }}
      />
    </SafeAreaView>
  );
};

这 stylesprop 是一个使用 React Native 的标准样式属性和值的对象。随着 styles道具，您可以对组成的不同部分进行样式设置 GooglePlacesAutocomplete零件。

这些部分——例如文本输入、下拉容器、每个下拉元素等——是 GooglePlacesAutocomplete零件。例如，设置文本输入的样式可以这样完成：

styles={
  textInput: {
   borderColor: 'orange',
   fontSize: 20
 }
}

您应该尝试根据其类型设置每个部分或属性的样式。例如，组件的容器是一个 View 组件，因此它应该被样式化为一个 View 组件。这是所有部分/属性及其元素类型的列表

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

可以限制显示的搜索结果 react-native-google-places-autocomplete向一个国家提出建议。因此，只有在特定国家/地区与用户搜索字符串匹配的地点才会弹出。

使用 query 属性中的组件属性来指定国家，如下所示：

query={{key: apiKey, components: 'country:us'}}

这 country:usvalue 仅仅意味着美国。使用的是国家名称的缩写，而不是全名。这是受支持国家/地区的列表。

使用查询道具，您还可以提供不同语言的结果。中指定不同的语言。默认语言是英语，但使用语言属性，您可以在其 ISO 639-1 代码

query={{key: apiKey, components: 'country:us', language: 'it'}}

在上面的代码中，我们设置 language财产 it. 这将提供意大利语的结果。如果您想以其他语言提供搜索结果，请查看支持的语言列表及其代码。

现在，如果用户开始搜索，搜索结果将以意大利语显示，并且仅显示美国境内的选项。

获取输入值

提供的方法之一 react-native-google-places-autocomplete包是 getAddressText. 此方法返回用户文本输入的值。

这种方法有很多用例。示例包括在搜索未知地点时以特殊方式显示用户的输入，或在搜索时发生错误时重用用户的最后输入。

要使用包提供的任何方法，我们首先必须引用 GooglePlacesAutocomplete的组件使用 React refs ，如下所示：

const App = () => {
  const placesRef = useRef();

  const getAddress = () => {
    console.log(placesRef.current?.getAddressText());
  };

  return (
    <SafeAreaView>
      <GooglePlacesAutocomplete
        placeholder="Type a place"
        onPress={(data, details = null) => console.log(data, details)}
        query={{key: apiKey}}
        fetchDetails={true}
        onFail={error => console.log(error)}
        onNotFound={() => console.log('no results')}
        ref={placesRef}
      />
    </SafeAreaView>
  );
};

其他可能有用的方法是：

setAddressText: 改变文本输入的值
clear: 清除文本输入
isFocused: 如果文本输入有焦点则返回 true，否则返回 false。
getCurrentLocation：根据当前位置进行查询以查找附近的地方。

让我们探索如何使用 getCurrentLocation下一个。

电脑装机必备软件包，重装电脑不再烦恼，33款工具满足你电脑需求！

获取当前位置

这 getCurrentLocation方法根据用户的当前位置进行查询以查找附近的地点。然而，这并不是这个包提供的唯一定位功能；它还可以像检索有关地点的信息一样获取用户的当前位置。

该软件包使用地理定位服务来查找用户的位置，并将其作为自动完成建议的一部分。选中后，将返回有关用户当前位置的详细信息。

为此，我们必须设置 currentLocation支持 true:

const App = () => {
  return (
    <SafeAreaView>
      <GooglePlacesAutocomplete
        placeholder="Type a place"
        onPress={(data, details = null) => console.log(data, details)}
        query={{key: apiKey}}
        fetchDetails={true}
        onFail={error => console.log(error)}
        onNotFound={() => console.log('no results')}
        currentLocation={true}
        currentLocationLabel="Your location!" // add a simple label
      />
    </SafeAreaView>
  );
};

这并不是为功能齐全的应用程序设置的全部内容。您还必须安装地理定位服务提供商，例如 react-native-geolocation-service.

此外，您需要要求您的用户授予位置权限以使用任何位置服务 react-native-google-places-autocomplete. 但是，这些具体步骤超出了本文的范围，本文特别关注 react-native-google-places-autocomplete包裹。

结论

在本文中，我们了解了如何为 react-native-google-places-autocomplete包裹。我们还通过包的 props 和方法查看了大量功能。

例如，我们研究了处理响应、保护您的 API 密钥、样式化 GooglePlacesAutocomplete组件，将结果限制在一个国家/地区，以不同的语言显示结果，使用诸如 getAddressText，使用自定义文本输入组件等。

现在，该软件包不仅限于我们在此处列出的内容。您可以找到更多道具和方法，以适应您希望 Google Places API 在您的应用程序中的使用方式。有助于自定义包的

我希望你玩得很开心。在评论部分让我知道你的想法。感谢阅读，祝黑客愉快。

LogRocket 主动显示和诊断 React Native 应用程序中最重要的问题

成千上万的工程和产品团队使用 LogRocket 来减少了解其 React Native 应用程序中技术和可用性问题的根本原因所需的时间。使用 LogRocket，您将减少与客户来回对话的时间，并消除无休止的故障排除过程。 LogRocket 让您可以花更多时间构建新事物，而减少修复错误的时间。