隱藏在內容后面的下拉菜單

Question

我有一個看起來像這樣的屏幕：

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>
  );

它的 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,
  }
});

當我在第一個輸入字段中寫入內容時，我通過LocationsFound組件獲得搜索結果。 但是，搜索結果開始隱藏在第二個輸入字段后面。 我希望它簡單地重疊並位於第二個字段的頂部，直到其中一個被選中。 那可能嗎？

Answer 1

你試過zIndex嗎？

dropdown:{
  position: 'absolute',
  top: 200,
  zIndex: 10,
  backgroundColor: '#fff'
}

Answer 2

您可以嘗試的第一件事是更改 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>
  );

另一種解決方案可能是將 z-index 添加到您的下拉列表中：

    fieldDescription: {
        alignItems: 'center',
      },
        dropdown:{
        position: 'absolute',
        top: 200,
        zIndex: 1 // ... or more  
}

Answer 3

它對我有用，我給下拉列表中顯示的視圖提供了負 zIndex。

<View>
<DropDownPicker ... />
</View>
<View style={{ zIndex : -5 }}>
<Button ... />
<Button ... /> 
</View>

Answer 4

我通過將 dropDownDirection="TOP" 道具添加到下拉組件中來解決此問題，從而使下拉容器向上呈現。

<DropDownPicker
  dropDownDirection="TOP"
  ...
 />