将react-native-google-places-autocomplete分成不同的字段

Question

我正在开发一个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"}
}}
/>

Answer 1

这是您可以执行的操作的示例。

<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 时，您可以访问有关您输入的地址的更具体数据。

选择您要查找的字段后，使用上面的功能可以帮助您填写更多字段。

您需要对其进行一些调整才能获得您正在寻找的其余字段。