[英]drop down menu hiding behind content
I have a screen that looks like this:我有一个看起来像这样的屏幕:
return (
<SafeAreaView>
<View style={styles.container}>
<View style={styles.topContainer}>
<View style={styles.searchFieldContainer}>
<FavoritePointInput
textChangeHandler={textChangeHandler}
/>
</View>
<View style={styles.dropdown}>
<LocationsFound
addressesFound={locations.favAddressesFoundList}
/>
</View>
<View style={styles.fieldDescription}>
<Text>Set Location's Name:</Text>
</View>
<View style={styles.searchFieldContainer}>
<Item style={styles.searchField}>
<Input
placeholder="Library"
onChangeText={(text) => setLocationName(text)}
style={styles.searchText}
/>
</Item>
</View>
<View style={styles.buttonContainer}>
<Button style={styles.button}>
<Text>Save Location</Text>
</Button>
</View>
</View>
</View>
</SafeAreaView>
);
Its Stlyes are as like this:它的 Stlyes 是这样的:
export const styles = StyleSheet.create({
container: {
height: '100%',
width: '100%',
},
topContainer: {
height: moderateScale(750),
},
topTextContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginVertical: moderateScale(15),
height: moderateScale(30),
paddingLeft: moderateScale(30),
paddingRight: moderateScale(30),
},
topMiddleContainer: {
alignItems: 'center',
},
topMiddleText: {
justifyContent: 'center',
paddingBottom: 40,
},
searchFieldContainer: {
alignItems: 'center',
height: moderateScale(120),
},
button: {
width: moderateScale(120),
borderRadius: moderateScale(20),
alignItems: 'center',
alignContent: 'center',
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'center',
},
searchField: {
width: moderateScale(300, 0.3),
height: verticalScale(40),
marginVertical: moderateScale(3),
borderRadius: verticalScale(10),
},
fieldDescription: {
alignItems: 'center',
},
dropdown:{
position: 'absolute',
top: 200,
}
});
When I write something in the first input field, I get search results through the LocationsFound
component.当我在第一个输入字段中写入内容时,我通过
LocationsFound
组件获得搜索结果。 However, the search results start to hide behind the second input field.但是,搜索结果开始隐藏在第二个输入字段后面。 I want it to simply overlap and come on top of the second field until one of them is selected.
我希望它简单地重叠并位于第二个字段的顶部,直到其中一个被选中。 Is that possible?
那可能吗?
Have you tried zIndex
?你试过
zIndex
吗?
dropdown:{
position: 'absolute',
top: 200,
zIndex: 10,
backgroundColor: '#fff'
}
The first thing you could try is to change the order of your DOM objects and be sure to add your result as last item:您可以尝试的第一件事是更改 DOM 对象的顺序,并确保将结果添加为最后一项:
return (
<SafeAreaView>
<View style={styles.container}>
<View style={styles.topContainer}>
<View style={styles.searchFieldContainer}>
<FavoritePointInput
textChangeHandler={textChangeHandler}
/>
</View>
<View style={styles.fieldDescription}>
<Text>Set Location's Name:</Text>
</View>
<View style={styles.searchFieldContainer}>
<Item style={styles.searchField}>
<Input
placeholder="Library"
onChangeText={(text) => setLocationName(text)}
style={styles.searchText}
/>
</Item>
</View>
<View style={styles.buttonContainer}>
<Button style={styles.button}>
<Text>Save Location</Text>
</Button>
</View>
<View style={styles.dropdown}>
<LocationsFound
addressesFound={locations.favAddressesFoundList}
/>
</View>
</View>
</View>
</SafeAreaView>
);
Another solution could be to add a z-index to your dropDown:另一种解决方案可能是将 z-index 添加到您的下拉列表中:
fieldDescription: {
alignItems: 'center',
},
dropdown:{
position: 'absolute',
top: 200,
zIndex: 1 // ... or more
}
It works for me I gave negative zIndex to the View which was showing on my dropdown list.它对我有用,我给下拉列表中显示的视图提供了负 zIndex。
<View>
<DropDownPicker ... />
</View>
<View style={{ zIndex : -5 }}>
<Button ... />
<Button ... />
</View>
I fixed this issue by adding dropDownDirection="TOP" props into dropdown component which render dropdown container upside.我通过将 dropDownDirection="TOP" 道具添加到下拉组件中来解决此问题,从而使下拉容器向上呈现。
<DropDownPicker
dropDownDirection="TOP"
...
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.