react-native-google-places-autocomplete 不起作用

Question

react-native-google-places-autocomplete 不起作用，我面临多个问题 1. 位置下拉没有显示 2. onPress 处理程序根本没有触发

注意：已启用所有 google location apis、google maps api、places api 和 geocode api，并提供有效的 api 密钥。

我尝试了 Internet 上所有可用的解决方案 1. 将 zIndex: 1000 设置为一个高值，以避免将其隐藏在其他视图后面 2. 尝试创建新的 RN App 并仅添加此组件以保持项目清洁 3. 引用其他SO 帖子和试图修复它

这里是代码片段

<GooglePlacesAutocomplete
  placeholder="Search"
  minLength={2} // minimum length of text to search
  autoFocus={false}
  fetchDetails={true}
  onPress={(data, details = null) => {
    // 'details' is provided when fetchDetails = true
    console.log(data);
    console.log(details);
  }}
  getDefaultValue={() => {
    return ''; // text input default value
  }}
  query={{
    // available options: https://developers.google.com/places/web-service/autocomplete
    key: 'VALID_API_KEY',
    language: 'en', // language of the results
  }}
  styles={{
    description: {
      fontWeight: 'bold',
    },
    predefinedPlacesDescription: {
      color: '#1faadb',
    },
    listView: {
      color: 'black', //To see where exactly the list is
      zIndex: 1000, //To popover the component outwards
      position: 'absolute',
      top: 45
    },
  }}
  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
    }
  }
  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]}
  predefinedPlacesAlwaysVisible={true}
/>

Answer 1

确保将组件包装在 ScrollView 中，如下所示：

<ScrollView>
                    <GooglePlacesAutocomplete
                        placeholder='Search destination'
                        minLength={2}
                        onPress={(data, details = null) => {
                            // 'details' is provided when fetchDetails = true
                            console.log(data, details);
                        }}
                        query={{
                            key: mapApiKey,
                            language: 'en',
                        }}


                    />
                </ScrollView>

Answer 2

我对这个库有同样的问题，在尝试了几个小时后，我找到了一个解决方案。问题出在 google API 的计费配置中。尝试配置您使用密钥的项目并激活计费配置，它解决了我的问题。请让我知道它是否适合您。

PS我希望这可以帮助你。