Блог

Я использую react-native-autocomplete-input компонент <AutoComplete> , в который я вставил два значка слева (поиск) и справа (закрытие) AutoComplete .

        <View style={styles.searchSection}>
          <AntDesign
            name="search1"
            size={18}
            color="gray"
            style={styles.searchIcon}
          />
          <Autocomplete
            autoCapitalize="none"
            autoCorrect={false}
            containerStyle={styles.autocompleteContainer}
            inputContainerStyle={styles.inputContainer}
            //data to show in suggestion
            data={filteredFilms}
            //default value if you want to set something in input
            defaultValue={
              JSON.stringify(selectedValue) === '{}'
                ? ''
                : selectedValue.title   selectedValue.id
            }
            // onchange of the text changing the state of the query
            // which will trigger the findFilm method
            // to show the suggestions
            onChangeText={(text) => findFilm(text)}
            placeholder="Search doctors, specialities, symptoms"
            renderItem={({item}) => (
              //you can change the view you want to show in suggestions
              <View style={{backgroundColor: 'red', flexDirection: 'column'}}>
                <TouchableOpacity
                  onPress={() => {
                    setSelectedValue(item);
                    setFilteredFilms([]);
                  }}>
                  <Text style={styles.itemText}>{item.title   item.id}</Text>
                </TouchableOpacity>
              </View>
            )}
          />
          <AntDesign
            name="close"
            size={18}
            color="gray"
            style={styles.clearIcon}
          />
        </View>
  

Без ввода клавиш пользовательский интерфейс выглядит нормально, как показано ниже:

Но когда я начинаю печатать, значки поиска и закрытия перемещаются в центр предложения:

Любое предложение, как я могу зафиксировать оба значка в верхней позиции. Пожалуйста, помогите.

Пожалуйста, попробуйте attribute alignItems:'flex-start' in styles.searchSection .

Для дальнейшего выравнивания значков используйте padingTop: 10 в обоих searchIcon и clearIcon .