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。

React Native：保持图标位置固定

React Native: keeping the icons position fixed

css

flexbox

react-native

react-native-stylesheet