Javascript 将搜索结果固定在容器顶部

我的屏幕如下所示：

return (
    <SafeAreaView>
      <View style={styles.container}>
        <View style={styles.topContainer}>
          <View style={styles.searchFieldContainer}>
            <FavoritePointInput
              textChangeHandler={textChangeHandler}
            />
          </View>
          <LocationsFound
            addressesFound={locations.favAddressesFoundList}
          />
          {/* <View style={styles.fixed}> */}
          <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>
      {/* </View> */}
    </SafeAreaView>
  );

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',
  },
  fixed: {
    position: 'absolute',
  }
});

当我在第一个输入字段中写入内容时，我通过

LocationsFound

组件获得搜索结果。这会干扰整个样式，并将第二个输入字段向下推。我希望它只是重叠并位于第二个字段的顶部，直到其中一个字段被选中。可能吗

编辑：

---

从代码中看，

似乎是您的下拉列表。您需要设置此组件的样式并为其提供绝对位置，以便将其从UI的正常定位流中删除。注意，您将绝对作品相对于其最近定位的祖先进行定位，因此您还需要相对定位其父对象

在您的标记中

<LocationsFound
  styles={styles.dropdown}
  addressesFound={locations.favAddressesFoundList}
/>

---

@matvs您的响应与react NATIVET无关这使我的位置隐藏在第二个输入字段后面。我在地图上加了一幅画qs@Jnl尝试将

zIndex

添加到下拉选择器中。将z索引添加到样式中，并将其设置为@monkey-0001所指的正值

searchFieldContainer {
  position: relative,
  // other attributes
}

dropdown {
  position: absolute,
  // adjust top and left according to your situation e.g. 10px
  top: 0;
  left: 0;
}