React Native - Google Autocomplete API
React Native是一种用于构建跨平台移动应用程序的开源框架。它允许开发人员使用JavaScript和React编写一次代码，然后将其在iOS和Android等多个平台上运行。React Native具有许多优势，包括快速开发、代码重用、热重载和原生性能。
Google Autocomplete API是Google提供的一个API服务，用于实现自动完成功能。它可以根据用户输入的部分关键字，提供相关的建议和补全选项。这个API可以用于各种应用场景，如搜索框自动补全、地址输入自动补全等。
在使用React Native开发移动应用时，可以使用Google Autocomplete API来实现地址输入自动补全功能。通过监听用户输入的文本，将其作为参数发送给Google Autocomplete API，并解析返回的建议列表。然后，将建议列表展示给用户，并根据用户选择的建议进行相应的处理。
腾讯云提供了一系列与云计算相关的产品，其中包括与React Native和Google Autocomplete API集成的产品。例如，腾讯云提供了云函数SCF（Serverless Cloud Function）服务，可以用于处理React Native应用中的后端逻辑。此外，腾讯云还提供了云数据库CDB（Cloud Database）服务，用于存储和管理应用程序的数据。具体的产品介绍和相关链接地址可以在腾讯云官方网站上找到。
总结起来，React Native是一种跨平台移动应用开发框架，Google Autocomplete API是Google提供的自动完成功能的API服务。在使用React Native开发移动应用时，可以集成Google Autocomplete API来实现地址输入自动补全功能。腾讯云提供了与React Native和Google Autocomplete API集成的产品，如云函数和云数据库。
相关·内容
我无法使用react Native autocomplete npm包，并且我一直收到这个错误" react - native -google-places-autocomplete unable to resolve module path/custom/left-icon“我正在使用react Native V0.44.0，我做错了什么？
import React from 'react';
import { View, Image } from 'react-native';
import { GooglePlacesAutocomple
浏览 0提问于2018-01-15得票数 3
我已经在我的项目中包含了react-native-google-places-autocomplete，就像Github中记录的那样，但它并没有像预期的那样呈现建议。Github上提供的示例足够了吗?或者我应该添加其他东西吗？
以下是我的代码(我的API包含在我的原始代码中)，它几乎与相同
import React from "react";
import {
Button,
Text,
Image,
TextInput,
TouchableOpacity,
View,
StyleSheet
} from "react-native"
浏览 0提问于2019-11-21得票数 1
我是react-native的新手，现在面临着这个问题： google-places-autocomplete在视图中包装时不起作用(滚动条不显示)，当我删除视图时它起作用.. 控制台日志不显示任何内容，android模拟器显示其他内容。 帮助some1？无论如何，还是要感谢:) import React,{useState} from 'react';
import FormCity from '../components/FormCity';
import {View,Text} from 'react-native';
const ad
浏览 16提问于2021-01-03得票数 1
我想在用户使用react-native-google-places-autocomplete搜索位置时生成一个标记。我正在使用expo react native。目前，标记设置在固定位置。我希望它被设置为基于用户通过react-native-google-places-autocomplete给出的输入。我如何才能做到这一点？下面是我的代码： <View>
<GooglePlacesAutocomplete
placeholder=""
query={{
浏览 27提问于2021-04-16得票数 1
回答已采纳
我在我的React Native App中有这样的政策：
违反Android广告ID政策和开发商分发协议第4.8节
表单Google Play
我使用这个依赖项
"dependencies": {
"lodash": "^4.17.10",
"react": "16.3.1",
"react-native": "0.55.3",
"react-native-device-info": "^0.21.5",
"react-na
浏览 0提问于2018-09-23得票数 3
回答已采纳
这是使用Google的API来响应本地地图的代码。
import React, { useEffect, useState } from 'react';
import { PermissionsAndroid, StyleSheet, View, Dimensions } from 'react-native';
import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';
import Geolocation from 'react-native-geolo
浏览 6提问于2022-03-18得票数 0
回答已采纳
1回答
我正在为我的地图输入文本，使用世博会位置API (地理编码)搜索给定的位置。我的问题是，我想做一个自动补全的位置...就像这个组件
有什么想法吗？我不使用react-native-google-places-autocomplete，因为上面有"Powered by Google“的徽标。
Pd:谷歌版权标志在地图的底部。
浏览 0提问于2020-06-17得票数 0
2回答
我正在创建一个电子商务应用程序，我们需要邮政编码来计算运输成本，使用来自google place api的地址自动完成，不确定它是否是api的限制，但它不返回邮政编码。我使用https://github.com/FaridSafi/react-native-google-places-autocomplete进行自动补全。 我也浏览了google文档，但没有提到任何相关内容。 只是想知道有没有办法从地址中获取邮政编码？
浏览 38提问于2020-07-26得票数 0
回答已采纳
4回答
我使用react-native-google-places-autocomplete来选择一个位置。我想提取选定的位置，并在其他组件中使用它。
我如何保存地址？
这是我的密码
import React, {Component} from 'react';
import { View, Image, Text, StyleSheet } from 'react-native';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
浏览 0提问于2018-07-18得票数 6
1回答
import React, {Component} from 'react';
import {Platform,StyleSheet,Text,View,TouchableOpacity,Alert,Image,Button} from 'react-native';
import { Dialog } from 'react-native-simple-dialogs';
import AsyncStorage from '@react-native-community/async-storage';
import MapV
浏览 0提问于2019-04-15得票数 0
1回答
我已经将我的应用程序连接到google，并且我一直在工作到某个点(我不知道更改了什么)，但是当我去查看google开发人员控制台时，API不再接收我的请求，我既没有显示4XX，也没有显示2XX(以前显示)。
这是我的密码
import React,{useState,useEffect} from "react";
import { View ,Text, TextInput ,SafeAreaView, ListView } from "react-native";
import { GooglePlacesAutocomplete } from '
浏览 0提问于2021-10-22得票数 0
回答已采纳
3回答
我有一个可以工作的<TextInput>
<TextInput
placeholder="Location"
value={props.locationInput.toString()}
onChangeText={location => props.updateLocationInput(location)}
/>
props.locationInput最初是''的，但一旦应用程序启动，就会触发几个异步函数，并获取用户的当前位置，这些位置将填充props.locationInput (在
浏览 3提问于2017-05-04得票数 7
我正在尝试使用带有Google Places API的React Hooks来自动完成位置搜索，找到该位置的Google Place ID，然后使用该值更新我的组件状态。
我有了Google API，并且我能够获得Place ID，但是我不确定如何从我所在的函数更新我的状态
function onMapsLoad() {
// init autocomplete
const autocomplete = new window.google.maps.places.Autocomplete(document.getElementsByClassName('search')
浏览 11提问于2019-07-26得票数 0
回答已采纳
1回答
我正在构建一个基于位置的iOS应用程序，使用react-native-maps和react-native-google-places-autocomplete。
在我的代码中，首先是搜索条形码，其次是地图代码--这就是搜索条在地图顶部呈现的结果。问题是，我无法移动地图，因为搜索栏组件似乎有一个透明的元素占据整个屏幕。当搜索栏被移除时，我可以移动地图。我怎样才能让搜索栏在地图的顶部，也移动地图。
我欢迎做我想做的事情的其他方法/更好的方法。
import React, { Component } from 'react';
import {
AppRegistry,
St
浏览 0提问于2017-04-30得票数 2
回答已采纳
我已经为我的地址字段实现了自动完成，但是从Google Maps places autocomplete返回的json不包括这些地点的地理编码坐标。 有一些答案似乎并不合适。例如，this one指的是像google.maps.places.Autocomplete(input, options);这样的东西，我认为这在React Native中是不存在的。 其他答案似乎是基于react-native-google-places-autocomplete的，但我自己实现了这个，我不想再使用这个模块了。 下面是我调用API的方法。 async handleAddressChange() {
浏览 65提问于2019-04-23得票数 1
回答已采纳
`
import React, { useEffect, useRef, useState } from 'react';
import { View, Text,LocationSearchInput } from 'react-native';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
const App = () => {
const ref = useRef();
// useEffec
浏览 11提问于2022-11-28得票数 0
如何设置搜索图像图标的反应-本机-谷歌-地点-自动完成？
我想知道如何在左侧设置搜索图像图标的反应-本机-谷歌-地点-自动完成。
我想要这样的输出在下面的screen.So，请帮助我。
但我的设计是这样的。
这是DiscoveryLocation.js文件的代码。
import React, { Component } from 'react'
import { Text, View, TouchableOpacity, TextInput, StyleSheet, Image } from 'react-native'
impo
浏览 0提问于2020-02-06得票数 2
我正在开发一个react原生应用程序，使用react- native -google-places-autocomplete。我想自定义它的列表视图，这样它就像一个模型，而不是所有其他组件。目前，当我们搜索一个位置时，列表视图会显示在其他组件下。如何让它位于下面所有其他组件的顶部是我的代码。 <GooglePlacesAutocomplete
placeholder='Search'
minLength={2} // minimum length of text to search
autoFocus={false}
浏览 10提问于2019-06-26得票数 1
在我的react原生应用程序中，我使用react-native-google-places-autocomplete插件进行谷歌搜索，因此在iOS中，默认情况下，图像https://github.com/FaridSafi/react-native-google-places-autocomplete下方的搜索栏中会出现灰色图标，用于取消复选框 ? 我的代码如下 <GooglePlacesAutocomplete
placeholder={props.placeholder}
onPress={(data, details = null) => props.onP
浏览 73提问于2021-09-23得票数 0
回答已采纳
我正在做react原生地图。我试着用react关注youtube上的一段视频。现在我喜欢使用原生react来实现它。我遇到了这个错误，“元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)，但got: undefined。” 我试着查看我的导入是否有任何问题。但是我找不到任何问题，请看下面的代码 Map.js import React, { Component } from 'react';
import { Text,TextInput,View, Image, Button} from 'react-native';
import M
浏览 15提问于2020-10-12得票数 0
回答已采纳
我正在使用搜索和显示地址列表。
然而，在搜索时，我得到的是‘组件异常-对象无效作为一个反应子.’错误。
当我console.log时，它会显示对象结果(地址列表)，但是它无法呈现它。如能在此问题上提供任何帮助，将不胜感激。
我提供了下面的代码片段以及错误的屏幕截图。
这里是我的代码片段：
import 'react-native-gesture-handler';
import React from 'react';
import {
SafeAreaView,
StyleSheet,
View,
Text,
FlatL
浏览 2提问于2021-07-22得票数 1
回答已采纳
2回答
我想去买些运动场/场地，甚至公寓，我怎么能买到呢？目前，我得到的结果很少在自动完成。
包名： react-native-google-places-autocomplete。
API: GooglePlacesAutocomplete
<GooglePlacesAutocomplete
query={{
// available options: https://developers.google.com/places/web-service/autocomplete
key: ,
language: "
浏览 12提问于2019-10-05得票数 0
我试图使用用户输入运行搜索，但在运行代码时，我的searchInput变量显示为未定义的。我不知道我做错了什么。谢谢你的帮忙!
，这是我的代码：
import React, { useState } from "react";
import {
TouchableOpacity,
StyleSheet,
View,
Modal,
TextInput
} from "react-native";
import Icon from "react-native-vector-icons/Feather";
import API_K
浏览 0提问于2019-12-30得票数 0
这件事之前还不错。可能的未处理的承诺拒绝(id: 0)：错误:在调用本机方法时遇到异常:在模块'com.google.android.gms.location.FusedLocationProviderClient‘上执行导出方法getLastKnownPositionAsync : Found但类时发生异常(声明为’com.google.android.gms.location.FusedLocationProviderClient‘)
我已将以下内容添加到我的build.gradle文件中：
implementation 'com.google.android.gms:
浏览 17提问于2022-10-16得票数 3
1回答
我在我的react本机项目上使用这个Google。
我的代码：
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete'
<GooglePlacesAutocomplete placeholder='Search'
query={{key:'',components: 'country:us'}}
onPress={(data, details) => {
浏览 2提问于2022-01-25得票数 0
每当我尝试assembleRelease我的应用程序时，我都会遇到这个错误：
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':react-native-billing:verifyReleaseResources'.
> com.android.ide.common.process.ProcessException: Failed to execute aapt
* Try:
Run with --info or --debug option
浏览 0提问于2018-12-13得票数 1
我在我的react code.When中使用google places自动完成api，我将此代码保存在单独的文件中，并在另一个文件中调用此组件。当我在表单中将位置搜索输入字段与其他字段组合时，它不是working.Whats，当我与表单中的其他字段组合时，问题是什么？ 这段代码 import React from "react";
/* global google */
class SearchBar extends React.Component {
constructor(props) {
super(props);
this.autocompleteInput =
浏览 11提问于2020-07-28得票数 1
我在@react中使用Autocomplete组件有困难-google/api。自动完成本身工作，并将显示选项。单击一个选项会填充输入框，但我只会从Api的位置返回“未定义的”。我避免使用类似PlacesAutocomplete的东西，因为我更喜欢谷歌内置的结果渲染。
编辑: App.js文件应该是最低限度的功能，使用适当的API键。
import React, { useState, useRef} from 'react';
import { Autocomplete, useLoadScript } from '@react-google-maps/api'
浏览 11提问于2022-09-28得票数 0
回答已采纳
我使用react-native-google-places-autocomplete来选择一个位置。我想提取选定的位置，并使用它作为一个道具传递给另一个函数。该值应为字符串类型。我不知道如何提取选定的描述值。以下是我到目前为止所拥有的：
<GooglePlacesAutocomplete
placeholder='Event Location'
minLength={2} // minimum length of text to search
autoF
浏览 0提问于2018-02-23得票数 3
回答已采纳
幸运的是，我找到了一个关于使用自动完成的本地Google的解决方案。我能够使用功能组件来转换代码。最初，我的代码似乎是从react(原生的-google- map )自动完成的地址中获取地址，但不幸的是，地图没有显示，给出了一个错误。
错误警告:错误的道具类型:螺旋桨region.latitude在MapView中被标记为必需的，但它的值是undefined。
import React, { useEffect, useRef, useState } from 'react';
import { View, StyleSheet } from 'react-native
浏览 11提问于2022-05-26得票数 -1
回答已采纳
使用React Native Google Places autocomplete时，我会得到以下错误。
此IP、站点或移动应用程序未被授权使用此API密钥.
我使用的是一个Google Places API网络服务密钥，它限制了Android。这个包名为com.xxx.xxx.debug和com.xxx.xxx.test。另一个API密钥仅限于com.xxx.xxx。我添加了正确的SHA-1密钥。
有人知道我做错了什么或者为什么不起作用吗？我已经检查了谷歌的文档，并尝试了许多不同的东西，但我仍然不能让它在一个限制下工作。
浏览 11提问于2017-07-11得票数 2
当我试图在我的Mac M1上用android和ios构建我的本机应用程序时，当我在error.....it上构建时，就不会出现这个error.....it：
Package firebase-functions has been ignored because it contains invalid configuration. Reason: Package subpath './package.json' is not defined by "exports" in /Users/..../node_modules/firebase-functions/pa
浏览 5提问于2022-04-25得票数 2
1回答
checkHandlerThread(Landroid/os/Handler;Ljava/lang/String;)V : Lcom/google/android/gms/common/internal/Preconditions；类中没有静态方法java.lang.NoSuchMethodError或它的超类( 'com.google.android.gms.common.internal.Preconditions‘的声明出现在/data/app/tv.ampz-xq0syKD7zk1lwewrOmiHaw==/base.apk!classes35.dex) at com.goo
浏览 0提问于2019-01-15得票数 0
我想限制我的搜索仅限于我的城市内的地方，任何帮助都将不胜感激
我正在使用=> FaridSafi/react-native-google-places-autocomplete
谢谢
浏览 11提问于2018-03-04得票数 0
我已经将react原生版本从0.55更新到0.59，并且遇到了一个严重的问题，并尝试了所有方法，但没有works.It给我的错误
undefined is not an object evaluating (_reactnative.Modal.propTypes.animationType)
这是我的package.json
{
"name": "Fuelex",
"version": "0.0.1",
"private": true,
"scripts": {
"
浏览 0提问于2019-08-08得票数 2
1回答
我使用react-native- google - places -autocomplete来实现google places的自动完成。我正在创建一个新页面来编辑地址，并希望在编辑之前使用setAddressText函数插入最后一个当前地址。
我试图创建一个引用并将其存储在google autocomplete组件的redux中，但由于这个搜索栏仅在单击编辑按钮时呈现，引用尚未创建，并且我无法在引用上使用setAddressText。
有谁有解决这个问题的办法吗？
浏览 5提问于2021-02-18得票数 0
我正尝试在我的React Native应用程序中使用react-native-google-places-autocomplete库，但在单击建议列表时遇到问题。每当我点击谷歌建议的地址时，列表就会消失，onPress也不会抓取地址。如果我在没有父组件的情况下单独使用组件中的库，它可以很好地工作，但只有当我将组件放在keyboardavoidingview或KeyboardAwareScrollView中时，它才不能工作： 此GooglePlacesInput.js组件只是原始repository的标准库 <GooglePlacesAutocomplete
浏览 17提问于2019-12-18得票数 11
回答已采纳
嗨，我得到了错误，而我是通过命令编译代码，但代码运行使用Android Studio.Below的错误信息
bundling: UnableToResolveError: Unable to resolve module `react-native/Libraries/Renderer/shims/ReactNativePropRegistry` from `/home/rahul/React/Android /trixie/trixie/node_modules/native-base/dist/src/Utils/computeProps.js`: Module does not exis
浏览 0提问于2017-09-12得票数 1
为什么我会得到这个错误--当我同步gradle时，它不会发生，但是当我运行这个项目时，我会得到这个错误。
任务':app:transformClassesWithJarMergingForDebug'.执行失败
com.android.build.api.transform.TransformException: java.util.zip.ZipException:复制条目:com/google/android/gms/ duplicate /api/zzf.class
我不知道哪个依赖项会导致这个错误，我的依赖项是。
dependencies {
compile p
浏览 0提问于2017-09-26得票数 1
回答已采纳
我知道StackOverflow上有几个人问过类似的问题，但是他们没有用世博来构建他们的项目，所以使用XCode的解决方案不适用于我。
我正在尝试使用命令eas build --profile development --platform ios构建我的expo项目，它一直在错误[stderr] [!] <PBXResourcesBuildPhase UUID=13B07F8E1A680F5B00A75B9A>attempted to initialize an object with an unknown UUID.5360B39C71704D31869D9F73for attr
浏览 31提问于2022-04-12得票数 0
回答已采纳
在将React- native -firebase添加到应用程序之后，尝试构建我的react本机项目会导致构建应用程序失败。我收到以下错误：
* What went wrong:
Could not resolve all files for configuration ':app:debugCompileClasspath'.
> Could not find com.google.android.gms:play-services-measurement-api:9.8.0.
Searched in the following locations:
f
浏览 1提问于2018-10-08得票数 0
react-native-google- places -autocomplete不工作，我面临多个问题1. places下拉菜单没有显示2.根本没有触发onPress处理程序
注意:所有google location api均已启用，google maps api、places api和geocode api均已启用，并提供了有效的api密钥。
我尝试了互联网上所有可用的解决方案1.将zIndex: 1000设置为较高的值，以避免它隐藏在其他视图后面2.尝试创建新的RN应用程序，并仅添加此组件以保持项目的整洁3.参考了其他
下面是代码片段
<GooglePlacesAutocomple
浏览 0提问于2020-01-28得票数 8
1回答
我尝试在需要时以编程方式添加google api脚本。然而，我得到了一个错误，google没有被定义。我可以看到脚本被添加到body标记的末尾。
之前我已经在index.html文件中加载了脚本，但是现在我已经在应用程序的其他地方创建了一个不同的组件，它需要自己的脚本，因为它有一个不同的API键。因此，我必须从index.html中删除该脚本，因为它为多次使用该脚本提供了一个异常。现在，我想在组件加载时添加它。
请参考下面的代码了解主要组件：
import React from 'react';
import { Button } from 'reactstrap
浏览 4提问于2018-12-28得票数 1
1回答
自动完成建议在对话框后面
、、、
我正在使用来自Autocomplete包的一个组件。
是Autocomplete组件的文档。
第一例：
正如我们在下面的屏幕截图中所看到的，Autocomplete在input或text field元素本身下给出了一些建议。
但是，当我将Autocomplete和text field组件从包装到Dialog组件中时，建议将显示在Dialog组件下面，我们在下面的屏幕截图中可以看到。
是代码(注意:请在index.js文件中插入Google密钥)
依赖项(在package.json文件中)：
"@material-ui/core": "^4.12.3&
浏览 3提问于2021-10-12得票数 4
回答已采纳
2回答
我正在开发react原生推送通知，并在build.gradle文件中配置fcm
我收到错误消息
> Task :react-native-device-info:compileReleaseJavaWithJavac
Note: E:\IOOLABS\Projects\mobeApp\mobeApp\node_modules\react-native-device-info\android\src\main\java\com\learnium\RNDeviceInfo\RNDeviceModule.java uses or overrides a deprecated API.
Note
浏览 0提问于2018-05-18得票数 0
我正在尝试构建一个类似于Airbnb上的地图，您可以在拖动地图时查看地点标记。我想在地图上使用Google Places API搜索“治疗中心”和位置标记。 我一直在使用新的、重新编写的@react-google-map/api。到目前为止，我可以创建一个搜索框和一个自动补全，并获得它们的纬度和经度，但它们都只提供特定的位置，而不是最相似的搜索(例如，如果你在谷歌地图上搜索塔可钟，它会在你旁边显示几个选项)。下面的代码显示了带有搜索框的地图： import { GoogleMap, LoadScript, Marker, StandaloneSearchBox, Autocomplete }
浏览 68提问于2020-12-22得票数 0
1回答
谁能帮我调试这个代码，我想使用'react-native- autocomplete - input‘库来自动完成一个搜索文本输入，基本上api请求返回一个股票代码和公司名称的列表，我正在考虑将这个文件存储在本地以使它更快，因为现在我只想让它使用fetch工作。自动完成功能必须在responseJson.symbol中搜索
以下是我到目前为止所做的工作：
import Autocomplete from 'react-native-autocomplete-input';
import React, { Component } from 'react';
浏览 5提问于2018-01-15得票数 0
1回答
我的应用程序正常工作！
当run android编译应用程序时，没有错误，但在显示消息时返回消息。
不幸的是，应用程序已经停止。
当我安装和连接这两个软件包时，发生了这种情况。
react-native-push-notification和react-native-google-analytics-bridge
{
"rnpm": {
"assets": [
"./assets/fonts/"
]
},
"name": "Melkana",
"versio
浏览 0提问于2018-07-17得票数 1
回答已采纳
我的安卓/app/build.gradle(下图)：
dependencies {
compile project(':react-native-onesignal')
compile project(':react-native-youtube')
compile(project(":react-native-google-sign-in")) {
exclude group: "com.google.android.gms"
}
compile project('
浏览 0提问于2017-09-06得票数 1
2回答
<View style={{
flex: 1,
paddingTop:100
}}>
<Text>asfhjdshfdsbfbusdufn</Text>
<GooglePlacesAutocomplete
placeholder='Search'
minLength={2}
// minimum length of text to search
autoFocus={false}
returnKeyTyp
浏览 0提问于2019-04-05得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
