我正在开发一个uni项目,并且我已经安装了react-native-google地方自动完成搜索。
我正在尝试实现以下内容: A。我希望在用户输入城市或街道名称时出现建议...但是,我不确定如何将自动完成搜索拆分为多个字段。 b.因为我可能无法实施选项a。我会让用户输入数据,我希望我可以在代码中将该数据传递给自动完成功能(如对象)并获取结果 - 基本上根据用户输入的内容进行搜索并选择返回的第一个项目。
但是,我在自动完成表单上没有看到任何可以使用实施选项 b 的属性。
目标是通过表单获取数据,将其传递给搜索并获得与单击下拉列表时相同的结果。
我真的很感激任何反馈或建议,同时,我将继续尝试并做一些进一步的搜索。
<GooglePlacesAutocomplete
placeholder='Search'
fetchDetails={true}
GooglePlacesSearchQuery={{
rankby: "distance"
}}
onPress={(data, details = null) => {
console.log(data);
console.log(data, details);
}}
query={{
key: 'API_KEY',
language: 'en',
components: 'country:uk',
types: ["supermarket","grocery_or_supermarket","food","store", "establishment"],
nearbyPlacesAPI: 'GooglePlacesSearch',
radius: 30000
}}
enablePoweredByContainer={false}
styles={{
container: {flex:0, position: 'absolute', width: '100%', zIndex: 1},
listView: {backgroundColor:"white"}
}}
/>
这是您可以执行的操作的示例。
<GooglePlacesAutocomplete
placeholder='Search'
fetchDetails={true}
GooglePlacesSearchQuery={{
rankby: "distance"
}}
onPress={handleAddressSelect}
query={{
key: 'API_KEY',
language: 'en',
components: 'country:uk',
types: ["supermarket","grocery_or_supermarket","food","store", "establishment"],
nearbyPlacesAPI: 'GooglePlacesSearch',
radius: 30000
}}
enablePoweredByContainer={false}
styles={{
container: {flex:0, position: 'absolute', width: '100%', zIndex: 1},
listView: {backgroundColor:"white"}
}}
/>
您可以为 onPress 创建一个函数来处理输入并对其进行变异以获得您需要的内容。
const handleAddressSelect = (data: any, details: any) => {
if (!details) {
console.error('No details provided for selected address.')
return
}
const addressObj: { [key: string]: string } = {}
details.address_components.forEach((component: any) => {
const types = component.types
if (types.includes('street_number')) {
addressObj.street_address = component.long_name
} else if (types.includes('route')) {
addressObj.street_address = (addressObj.street_address ? addressObj.street_address + ' ' : '') + component.long_name
} else if (types.includes('locality')) {
addressObj.city = component.long_name
} else if (types.includes('administrative_area_level_1')) {
addressObj.state = component.long_name
} else if (types.includes('postal_code')) {
addressObj.postal_code = component.long_name
} else if (types.includes('country')) {
addressObj.country = component.long_name
}
})
setValue('street_address', addressObj.street_address || '')
setValue('city', addressObj.city || '')
setValue('state', addressObj.state || '')
setValue('postal_code', addressObj.postal_code || '')
setValue('country', addressObj.country || '')
}
使用 fetchDetails 时,您可以访问有关您输入的地址的更具体数据。
选择您要查找的字段后,使用上面的功能可以帮助您填写更多字段。
您需要对其进行一些调整才能获得您正在寻找的其余字段。