我正在使用React-Native-google-place-autocomplete来搜索位置，并且无法配置邮政编码

Question

我已经集成了https://github.com/faridsafi/react-native-google-places-places-places-autocmote-现在只需要知道如何从zip-code那里获得建议。示例：当我在搜索文本输入中写" 35801"时，应该在建议中给我"亨茨维尔，al">

我的自动完成组件

<GooglePlacesAutocomplete
  placeholder='Search'
  minLength={2}
  autoFocus={false}
  returnKeyType={'search'}
  keyboardAppearance={'light'}
  listViewDisplayed={false}
  fetchDetails={true}
  keyboardShouldPersistTaps="handled"
  renderDescription={row => row.description}
  onPress={(data, details = null) => {
    console.log(data,details);
    this.setState({location:data.structured_formatting.main_text, user_long:details.geometry.location.lng, user_lat: details.geometry.location.lat })
  }}
  enablePoweredByContainer={false}
  getDefaultValue={() => ''}
  textInputProps={{
    ref: (input) => {this.fourthTextInput = input}
  }}
  query={{
    // available options: https://developers.google.com/places/web-service/autocomplete
    key: 'api-key',
    language: 'en',
    region: "US", //It removes the country name from the suggestion list
    types: '', // default: 'geocode'
    components: 'country:us'
  }}
  styles={{
    container: {width:width/1.4}
    textInputContainer: {
      backgroundColor: 'transparent',
      margin: 0,
      width: width / 1.4,
      padding:0,
      borderTopWidth: 0,
      borderBottomWidth:0
    },
    textInput: {
      textAlign: 'center',
      minWidth: width/1.4, 
      borderColor: "#cbb4c0",
      borderBottomWidth: 1,
      color: '#5d5d5d',
      fontSize: 14,
    },
    description: {
      color:'#ac879a',
      fontWeight: '300'
    },
    predefinedPlacesDescription: {
      color: '#1faadb'
    }
  }}
  currentLocation={false} 
  nearbyPlacesAPI='GooglePlacesSearch' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
  GoogleReverseGeocodingQuery={{// available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
  }}
  GooglePlacesSearchQuery={{
    // available options for GooglePlacesSearch API : https://developers.google.com/places/web-service/search
    rankby: 'distance',
    type: 'cafe'
  }}    
  GooglePlacesDetailsQuery={{
    // available options for GooglePlacesDetails API : https://developers.google.com/places/web-service/details
    fields: 'formatted_address',
  }}
  filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']}
  debounce={200}
/>

Answer 1

在"详细信息"中找到ZipCode或邮政编码。从OnPress事件返回。

它实际上将在其中的一系列对象(adversion_components(内。

问题是它的位置可能会有所不同。

我发现的最好方法是迭代此数组，以寻找" postal_code"。

这对我有用：

const [postalCode, setPostalCode] = useState("")
return (
    <GooglePlacesAutocomplete
        placeholder='Search'
        onPress={(data, details) => {
            for (let i = 0; i < details.address_components.length; i++) {
               
                if (details.address_components[i].types[0] === "postal_code") {
                    setPostalCode(details.address_components[i].long_name)
                }
            }
        }}
        
        enablePoweredByContainer={false}
        fetchDetails={true}
        onFail={(error) => console.log("Error at finding location: ", error)}
        query={{
            key: googleKey,
            language: "en",
        }}
    />
)

编辑在08/07/21

另一个选项是将接收到的字符串分开。formatted_address。

这可能更容易。

我希望它hepls！

Answer 2

您可以在查询prop中使用'(region('键入

<GooglePlacesAutocomplete
    placeholder="Search"
    onPress={(data, details = null) => {
      // 'details' is provided when fetchDetails = true
      console.log(data, details);
    }}
    query={{
      key: GOOGLE_PLACES_API_KEY,
      language: "en", // language of the results
      types: "(regions)",
    }}
  />

如果您只想在特定国家/地区搜索：

query={{
      key: GOOGLE_PLACES_API_KEY,
      language: "en", // language of the results
      types: "(regions)",
      components: "country:us",
    }}