React Native：保持图标位置固定

Question

我正在使用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>

无需键入按键，UI 如下所示：

但是当我开始输入时，搜索和关闭图标都会被推到建议的中心：

任何建议，我如何将两个图标固定在其顶部位置。 请帮忙。

Answer 1

请在styles.searchSection 中尝试属性alignItems:'flex-start'。

要进一步对齐图标，请在searchIcon 和clearIcon 中使用padingTop: 10。