react-native-google-places-autocomplete中的当前位置

hfsqlsce 于 2023-06-06 发布在 React

关注(0)|答案(3)|浏览(169)

当选择当前位置时，API获取位置，但列表似乎没有填充/显示位置。但选中后，它会反转地理编码并在控制台中打印详细信息。
但是，它不会设置为textInput。
不知道我错过了什么
This is how the screen looks like
代码如下所示

<GooglePlacesAutocomplete
  placeholder='Deliver To'
  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
  listViewDisplayed='auto'    // true/false/undefined
  fetchDetails={true}
  renderDescription={row => row.description || row.vicinity} // 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: '',
    language: 'en', // language of the results
    types: 'geocode', // default: 'geocode'
    components: 'country:au',
  }}

  styles={{
    textInputContainer: {
      width: '100%',
      backgroundColor: 'rgba(0,0,0,0)',
      borderLeftWidth: 0.5,
      borderRightWidth: 0.5,

    },
    textInput: {
      fontFamily: "AvenirMedium",
      fontSize: 17,
      color: "#000",
      backgroundColor: 'rgba(0,0,0,0)',

    },
    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={'GoogleReverseGeocoding'} // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
  GoogleReverseGeocodingQuery={{
    // available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
    key: '',
    language: 'en',
  }}
/>

react-native

来源：https://stackoverflow.com/questions/52576127/current-location-in-react-native-google-places-autocomplete

3条答案

按热度按时间

brtdzjyr1#

1. Just add textInputProps={{ onBlur: () => {} }} in <GooglePlacesAutocomplete />
Ex.
2. comment   // renderDescription={(row) => row.description}

`<View>
                <ScrollView keyboardShouldPersistTaps="handled">
                    <View keyboardShouldPersistTaps="handled" >
                        <GooglePlacesAutocomplete
                            currentLocation={true}
                            placeholder='Enter your location'
                            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='true'    // true/false/undefined
                            fetchDetails={true}
                            //renderDescription={row => row.description || row.formatted_address || row.name}
                            // renderDescription={(row) => row.description} // custom description render
                            //components='country:ind'
                            onPress={(data, details = null) => {
                                //let address = details.formatted_address.split(', ');
                                console.log("DATAA", data);
                                console.log("details", details.name + ", " + details.formatted_address);
                                if (data && details) {
                                    this.setState({
                                        disLocation: data.description ? data.description : details.name + ", " + details.formatted_address,
                                        lat: details.geometry.location.lat ? details.geometry.location.lat : data.geometry.location.lat,
                                        lng: details.geometry.location.lng ? details.geometry.location.lng : data.geometry.location.lng
                                    })
                                }
                            }}
                            nearbyPlacesAPI='GooglePlacesSearch'
                            GooglePlacesSearchQuery={{
                                // available options for GooglePlacesSearch API : https://developers.google.com/places/web-service/search
                                rankby: 'distance',
                               // type: 'cafe'
                            }}
                            getDefaultValue={() => ''}
                            query={{
                                // available options: https://developers.google.com/places/web-service/autocomplete
                                key: 'AIzaSyCK9195rpO4FJm0UvXImv28Dek6iEBHI4k',
                                //language: 'fr', // language of the results
                                //types: 'address', // default: 'geocode'
                                //  components: 'country:ca' // added  manually
                            }}
                            styles={{
                                textInputContainer: {
                                    width: '100%'
                                },
                                description: {
                                    fontWeight: 'bold'
                                },
                                predefinedPlacesDescription: {
                                    color: '#1faadb'
                                }
                            }}
                            textInputProps={{ onBlur: () => {} }}
                            //GooglePlacesDetailsQuery={{ fields: 'formatted_address' }}
                            GooglePlacesDetailsQuery={{ fields: ['geometry', 'formatted_address'] }}
                            debounce={300} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.
                        />
                    </View>
                </ScrollView>
            </View>`

`https://github.com/FaridSafi/react-native-google-places-autocomplete/issues/496#issuecomment-606272340`

赞(0）回复(0）举报 2023-06-06

brgchamk2#

请移除 prop “renderDescription”。它会工作得很好。我也犯了这个错误。我浪费了很多时间。最后我找到了这个解决方案。

赞(0）回复(0）举报 2023-06-06

snz8szmq3#

请移除 prop “renderDescription”。

赞(0）回复(0）举报 2023-06-06