React Native智能提示输入框组件

最新推荐文章于 2025-06-18 19:52:55 发布

转载最新推荐文章于 2025-06-18 19:52:55 发布 · 597 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a98f4a1518825556140afff

文章标签：

#javascript #ViewUI

本文原创首发于公众号：ReactNative开发圈，转载需注明出处。

首先祝大家元宵节快乐，今天别忘记吃元宵哦！

React Native智能提示输入框组件：react-native-autocomplete-input，纯JS组件，实现用户在输入后自动提示相似内容，用户可以快捷的选择。

效果图

安装方法

npm install --save react-native-autocomplete-input

示例代码

<View style={styles.container}>
        <Autocomplete
          autoCapitalize="none"
          autoCorrect={false}
          containerStyle={styles.autocompleteContainer}
          data={films.length === 1 && comp(query, films[0].title) ? [] : films}
          defaultValue={query}
          onChangeText={text => this.setState({ query: text })}
          placeholder="输入星球大战电影名称"
          renderItem={({ title, release_date }) => (
            <TouchableOpacity onPress={() => this.setState({ query: title })}>
              <Text style={styles.itemText}>
                {title} ({release_date.split('-')[0]})
              </Text>
            </TouchableOpacity>
          )}
        />
        <View style={styles.descriptionContainer}>
          {films.length > 0 ? (
            Component07.renderFilm(films[0])
          ) : (
            <Text style={styles.infoText}>
              输入星球大战电影名称
            </Text>
          )}
        </View>
      </View>
复制代码