Question

我已经在Github中记录了react-native-google-places-autocomplete在我的项目中，但是它没有提供预期的建议。 Github上提供的示例是否足够？还是应该添加其他内容？

这是我的代码（我的原始代码中包含我的API密钥），几乎与Github example

相同

import React from "react";
import {
  Button,
  Text,
  Image,
  TextInput,
  TouchableOpacity,
  View,
  StyleSheet
} from "react-native";
import MapView, { PROVIDER_GOOGLE, Marker } from "react-native-maps";
import Colors from "./../../Shared/Colors";
import CommonStyles from "./../../Shared/CommonStyles";
import { Ionicons } from "@expo/vector-icons";
import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";

const homePlace = {
  description: "Home",
  geometry: {
    location: {
      lat: 48.8152937,
      lng: 2.4597668
    }
  }
};
const workPlace = {
  description: "Work",
  geometry: {
    location: {
      lat: 48.8496818,
      lng: 2.2940881
    }
  }
};

const Booking = props => {
  return (
    <View style={StyleSheet.absoluteFillObject}>
      <MapView
        provider={PROVIDER_GOOGLE} // remove if not using Google Maps
        style={StyleSheet.absoluteFillObject}
        region={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.015,
          longitudeDelta: 0.0121
        }}
      />
      <View style={styles.locationsInputs}>
        <View style={styles.pickupInput}>
        <GooglePlacesAutocomplete
      placeholder='Search'
      minLength={2} // minimum length of text to search
      autoFocus={false}
      returnKeyType={'search'} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
      keyboardAppearance={'light'} // Can be left out for default keyboardAppearance https://facebook.github.io/react-native/docs/textinput.html#keyboardappearance
      listViewDisplayed='auto'    // true/false/undefined
      fetchDetails={true}
      renderDescription={row => row.description} // custom description render
      onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
        console.log(data, details);
      }}

      getDefaultValue={() => ''}

      query={{
        // available options: https://developers.google.com/places/web-service/autocomplete
        key: 'myApiKey', // I have included my api key 
        language: 'en', // language of the results
        types: '(cities)' // default: 'geocode'
      }}

      styles={{
        textInputContainer: {
          width: '100%'
        },
        description: {
          fontWeight: 'bold'
        },
        predefinedPlacesDescription: {
          color: '#1faadb'
        }
      }}

      currentLocation={true} // Will add a 'Current location' button at the top of the predefined places list
      currentLocationLabel="Current location"
      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']} // filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities
      predefinedPlaces={[homePlace, workPlace]}

      debounce={200} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.
    />
          {/* <Image source={require("./../../assets/images/downloadarrow.png")} /> */}
        </View>
      </View>

    </View>
  );
};

export default Booking;

Answer 1

您需要替换google maps api key。检查autocomplete文档并检查如何从Google地图获取API KEY来自动完成。

在代码中替换api密钥

query={{
        key: 'myApiKey', // I have included my api key 
      }}

Answer 2

问题可能出在Google API的结算配置中。访问控制台以设置您的帐单详细信息。

https://github.com/FaridSafi/react-native-google-places-autocomplete/issues/503#issuecomment-612102925

Answer 3

将googleAutoPlaceComplete放入

    <ScrollView></ScrollView>

如何使用react-native-google-places-autocomplete

3 个答案: