react-native - 在 react-native 中打开时下拉选择器项目不可点击

问题描述

在此处输入代码我正在以本机反应构建应用程序，并且我面临下拉选择器项目选择的问题。当我们打开下拉选择器时，项目会显示，但是当我们尝试选择任何项目时，则无法选择它。如果我们将高度设置为下拉视图，那么它可以正常工作。如果我们删除高度并为视图设置“zIndex”，那么它再次无法正常工作。请帮助找到任何解决方案。

提前致谢。

<View style={styles.root}>
      <ImageBackground source={require('../assets/background.png')} style={styles.image1}>
      
        <View style={{ position: "relative",  zIndex: 1 }}>

          {shouldShow ? (
            <View style={styles.fullWidthView}>

              <View style={styles.halfWidthView}>
                <Text style={styles.blackText}>Date From</Text>
                <View style={styles.inputStyle}>
                  <TouchableOpacity
                    onPress={showDatepicker}>
                    <Text style={{ fontSize: 15 }}>{selectedDate2}</Text>
                  </TouchableOpacity>
                  {show && (
                    <DateTimePicker
                      testID='dateTimePicker'
                      timeZoneOffsetInMinutes={0}
                      value={date}
                      mode={mode}
                      is24Hour={true}
                      display='default'
                      onChange={onChange}
                    />
                  )}
                </View>
              </View>

              <View style={styles.halfWidthView}>
                <Text style={styles.blackText}>Date To</Text>
                <View style={styles.inputStyle}>
                  <TouchableOpacity
                    onPress={showDatepicker}>
                    <Text style={{ fontSize: 15 }}>{selectedDate}</Text>
                  </TouchableOpacity>
                  {show && (
                    <DateTimePicker
                      testID='dateTimePicker'
                      timeZoneOffsetInMinutes={0}
                      value={date}
                      mode={mode}
                      is24Hour={true}
                      display='default'
                      onChange={onChange}
                    />
                  )}
                </View>
              </View>

            </View>
          ) : null}
        </View>

        <View style={{height: 100, position: "relative", zIndex: 10000 }}>

          {shouldShow ? (
            <View style={styles.fullWidthView}>

              <View style={styles.halfWidthView}>
                <Text style={styles.blackText}>Leave Status</Text>
                <View style={{
                  width: 150,
                  fontSize: 15,
                  position: 'relative',
                  zIndex:90000
                }}>
                  <DropDownPicker
                    items={leaveStatusItems}
                    placeholder='Select status'
                    labelStyle={{ color: '#000', fontSize: 15 }}
                    placeholderStyle={{ color: '#000' }}
                    containerStyle={{
                      height: 40,
                      flexDirection: 'column'
                      ,zInde:450000 

                    }}
                    style={{ color: '#000', fontSize: 15, position:'relative'}}
                    itemStyle={{
                      justifyContent: 'flex-start',
                      height: 35, fontSize: 15
                    }}
                    dropDownStyle={{ backgroundColor: '#fafafa' }}
                    onChangeItem={item => setStatus(item.value)}
                    defaultValue={status}

                  />
                </View>
              </View>

              <View style={styles.halfWidthView}>
                <Text style={styles.blackText}>Leave Type</Text>
                <View style={{
                  width: 150,
                  fontSize: 15
                }}>
                  <DropDownPicker
                    items={leaveTypeItems}
                    placeholder='Select Type'
                    labelStyle={{ color: '#000', fontSize: 15 }}
                    placeholderStyle={{ color: '#000' }}
                    containerStyle={{
                      height: 40,
                      flexDirection: 'column',

                    }}
                    style={{ color: '#000', fontSize: 15, position:'relative',zInde:250000 }}
                    itemStyle={{
                      justifyContent: 'flex-start',
                      height: 35, fontSize: 15
                    }}
                    dropDownStyle={{ backgroundColor: '#fafafa' }}
                    onChangeItem={item => setType(item.value)}
                    defaultValue={type}

                  />
                </View>
              </View>

            </View>
          ) : null}
        </View>

        <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', position: 'relative', zIndex: 3 }}>

          <Text style={styles.orangeBoldText}>Recent Leaves:-</Text>

          <FlatList style={styles.flatList}
            data={leaveList}
            keyExtractor={(item, index) => index.toString()}
            renderItem={itemData => (
              <View style={styles.view3}>

                <Text style={styles.orangeBoldText}>{itemData.item.username}</Text>

                <View style={styles.horizontalView}>
                  <Text style={styles.grayText}>Subject :</Text>
                  <Text style={styles.grayText}>{itemData.item.title.toString().replace(itemData.item.username, "").replace(":", "").replace(" ", "")}</Text>
                </View>

                <View style={styles.horizontalView}>
                  <Text style={styles.grayText}>Date :</Text>
                  <View style={styles.innerHorizontalView2}>
                    <Text style={styles.grayText}>{itemData.item.startDate.toString().split(" ")[0]}</Text>
                  </View>

                </View>

                <View style={styles.horizontalView}>
                  <Text style={styles.grayText}>Leave Type :</Text>
                  <View style={styles.innerHorizontalView2}>
                    <Text style={styles.grayText}>{itemData.item.leaveTypeName}</Text>
                  </View>

                  <View style={styles.innerHorizontalView}>
                    <View style={styles.greenBackground}>
                      <Text style={styles.whiteText}>{itemData.item.leaveStatusName}</Text>
                    </View>
                  </View>

                </View>
              </View>
            )}></FlatList>

        </View>
      </ImageBackground>
    </View>

标签： react-native

<DropDownPicker items={leaveTypeItems} placeholder='Select Type' labelStyle={{ color: '#000', fontSize: 15 }} placeholderStyle={{ color: '#000' }} containerStyle={{ height: 40, flexDirection: 'column', }} style={{ color: '#000', fontSize: 15, position:'relative',zIndex:250000 }} itemStyle={{ justifyContent: 'flex-start', height: 35, fontSize: 15 }} dropDownStyle={{ backgroundColor: '#fafafa' }} onChangeItem={item => setType(item.value)} defaultValue={type} />

react-native - 在 react-native 中打开时下拉选择器项目不可点击

问题描述

解决方案

推荐阅读