Я реализовал response-native-google-place-autocomplete для контейнера представления, который является раскрывающимся.Представление раскрывающегося списка накладывается на другое представление контейнерной карты.Я не могу изменить контейнер реагировать-н-гугл-мест-автозаполнение идеально, и представление списка невозможно щелкнуть при наложении на другой контейнер ниже.
введите описание изображенияздесь
<GooglePlacesAutocomplete
placeholder="Eg., Andheri, Mumbai"
minLength={1} // 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: 'AIzaSyD43CuzEHmrEAfkTFWckr2E5VTLTwyuPXE',
language: 'en', // language of the results
types: '(cities)', // default: 'geocode'
}}
styles={googleSearchInput}
// 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',
}}
renderRightButton={() => (
<Image
style={{height:"30%",resizeMode:"contain" , alignSelf: 'center'}}
source={Images.searchIcon}
/>
)}
/>
const googleSearchInput = {
container: {
backgroundColor: '#fff',
alignSelf: 'center',
width: '60%',
marginBottom: 0,
borderRadius: 8,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.18,
shadowRadius: 1.0,
},
description: {
borderTopWidth: 0,
fontFamily: 'Poppins-Regular',
borderBottomWidth: 0,
backgroundColor: 'white',
color: '#00152b',
opacity: 0.9,
},
poweredContainer: {
backgroundColor: '#fff',
},
textInputContainer: {
height: 50,
backgroundColor: '#fff',
borderRadius: 0.2,
},
textInput: {
height: 33,
fontSize: 16,
backgroundColor: '#fff',
fontFamily: 'Poppins-Regular',
color: '#00152b',
placeholderTextColor: 'red',
},
separator: {
backgroundColor: 'white',
},
};