下拉式选择器放置在scrollview iss ins inss ins scroll上，但scrollview是

Question

我已经将下拉式选择器放在滚动视图上方时，当下拉列表选择器和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>

 

Answer 1

真正引起此问题的是zindex：2在＆lt; view＆gt;中//特定的搜索部分。如果删除zindex，则应停止遇到此问题。

同时，您可能会在下拉列表中遇到问题，因为您将不再看到选项（或下拉列表本身）。要解决此问题，您应该拥有＆lt; view // seva List组件的下部容器＆lt; view //特定搜索部分 component，然后添加zindex：0在最后一个＆lt; view＆gt;喜欢的情况下：

<View> // specific search section
    <DropdownPicker zIndex={1000}></DropdownPicker>
    <PrimaryButton></PrimaryButton>
    <View style={{zIndex:0}}>
        <ScrollView>
            <SevaCard></SevaCard>
        </ScrollView>
    </View>
</View>

如您所见，我还添加了zindex作为元素的属性，因为它可以在下拉点中允许，并首选。