react-native - 无法自定义 react-native-google-places-autocomplete。列表视图在另一个视图上重叠时不可点击
问题描述
我已经在下拉视图的视图容器上实现了react-native-google-places-autocomplete 。下拉视图与另一个容器卡视图重叠。我无法完美地修改react-native-google-places-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',
},
};
解决方案
推荐阅读
- db2 - 在 select 语句中添加空白列后,DB2 查询未提供任何数据
- python - 将二元分类修改为多类分类(逻辑回归)
- css - 打印时 CSS Grid 拆分为多个页面
- android - Gradle 插件“com.apollographql.apollo”未在 Android Studio 中同步
- router - 离子中的canActivate和canLoad有什么区别
- javascript - 如何根据我的 html 输入创建 javascript if 语句?
- visual-studio-code - 将“.default”添加到 package.json 中的 VScode 扩展的配置设置有什么影响?
- python - Selenium find_elements By.XPATH 试图提取 href urls 错误
- google-cloud-platform - Google Cloud 文字转语音字符数
- brython - 在 Object._b_.NotImplementedError.$factory 处出错(使用 Brython 在 $make_exc 处进行评估