Исправьте результаты поиска поверх контейнера - PullRequest
Новая
       6

Исправьте результаты поиска поверх контейнера

0 голосов
/ 09 июля 2020

У меня есть экран, который выглядит так: 

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. Это нарушает весь стиль и сдвигает второе поле ввода вниз. Я хочу, чтобы они просто перекрывались и располагались поверх второго поля, пока не будет выбрано одно из них. Возможно ли это?

enter image description here

enter image description here

Edit: введите описание изображения здесь

1 Ответ

1 голос
/ 09 июля 2020

Судя по коду, похоже, что <LocationsFound> - это раскрывающийся список. Вам необходимо стилизовать этот компонент и предоставить ему абсолютное положение, чтобы удалить его из обычного потока позиционирования пользовательского интерфейса. Обратите внимание, что вы позиционируете абсолютные произведения относительно его ближайшего позиционированного предка, поэтому вам также потребуется относительно позиционировать его родительский элемент.

В вашей разметке. 

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

И в ваших стилях 

searchFieldContainer {
  position: relative,
  // other attributes
}

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