我在ScrollView上方放置了一个下拉选择器,当下拉选择器和ScrollView都填充了数据时,我试图在下拉列表中滚动数据,而不是在后台滚动ScrollView。事实上,下拉列表根本不滚动,即使后台没有ScrollView,我也不确定我做错了什么。
<View style={styles.lowerContainer}>
{sevaListDrop ? (
<>
<View // specific search section
style={[styles.searchContainer, {zIndex: 2, marginBottom: '2%'}]}>
<DropDownPicker // dropdown
style={{borderColor: '#ccc'}}
containerStyle={{flex: 3, marginLeft: '2%'}}
dropDownContainerStyle={{
borderColor: '#ccc',
zIndex: 1000,
elevation: 1000,
position: 'absolute',
}}
open={openDrop}
setOpen={setOpenDrop}
items={sevaListDrop?.map(item => ({
label: item.sevaName,
value: item.calendarId,
}))}
placeholder="Select Seva"
value={calendarId}
setValue={type => setCalendarId(type)}
/>
<PrimaryButton // search button
name="Search"
action={search}
/>
</View>
<View // lower container for seva list
style={[styles.lowerContainer, {justifyContent: 'center'}]}>
{sevaList ? (
<ScrollView // seva list
style={{width: '100%'}}
contentContainerStyle={{
alignItems: 'center',
paddingBottom: 50,
}}
showsVerticalScrollIndicator={false}>
{sevaList?.map((item, index) => (
<SevaCard // seva card
key={index}
sevakName={item.sevakName}
bookedBy={item.bookedBy}
noOfAttendees={item.noOfAttendees}
onChangeText={text => {
setPeopleCount(item.slotId, text);
}}
onPress={() =>
updateAttendees(item.slotId, item.calendarId)
}
/>
))}
</ScrollView>
) : noDataInner ? (
<CautionSection // no data container
title="No Data Found"
icon="no_user_found"
/>
) : (
<CautionSection // default container
title="Search Patron Id"
icon="search"
/>
)}
</View>
</>
) : (
<View // lower caution container
style={[styles.lowerContainer, {justifyContent: 'center'}]}>
{noData ? (
<CautionSection // no data container
title="No Data Found"
icon="no_user_found"
/>
) : noConnection ? (
<CautionSection // no connection container
title="No Connection"
icon="no_connection"
/>
) : (
<CautionSection // default container
title="Search Patron Id"
icon="search"
/>
)}
</View>
)}
</View>
1条答案
按热度按时间ovfsdjhp1#
真正导致这个问题的是
<View> // specific search section
中的zIndex:2
。如果你擦除那个zIndex
,你应该就不会再有这个问题了。同时,您的Dropdown可能会出现问题,因为您将不再看到选项(或Dropdown本身)。要解决此问题,您应该将
<View // lower container for seva list
组件放在<View // specific search section
组件中,然后在最后一个<View>
中添加zIndex:0
,如下所示:正如您所看到的,我还添加了
zIndex
作为元素的属性,因为DropdownPicker
中允许使用它,并且是首选的。