[英]Current Location in react-native-google-places-autocomplete
選擇當前位置時,API獲取位置,但列表似乎不會填充/顯示位置。 But when selected it does reverse geocode and print the details in the console.
但是它沒有被設置為 textInput。
不知道我錯過了什么
代碼看起來像這樣
<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',
}}
/>
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`
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.