reactjs 放置在ScrollView上方的下拉选择器不响应滚动,但ScrollView响应

m4pnthwp  于 2023-01-30  发布在  React
关注(0)|答案(1)|浏览(119)

我在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>
ovfsdjhp

ovfsdjhp1#

真正导致这个问题的是<View> // specific search section中的zIndex:2。如果你擦除那个zIndex,你应该就不会再有这个问题了。
同时,您的Dropdown可能会出现问题,因为您将不再看到选项(或Dropdown本身)。要解决此问题,您应该将<View // lower container for seva list组件放在<View // specific search section组件中,然后在最后一个<View>中添加zIndex:0,如下所示:

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

正如您所看到的,我还添加了zIndex作为元素的属性,因为DropdownPicker中允许使用它,并且是首选的。

相关问题