本文原创首发于公众号: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>
主要参数说明
- containerStyle 组件所在容器的样式
- hideResults 当为true时隐藏自动提示
- data 自动提示数据源(数组)
- inputContainerStyle input组件所在容器的样式
- listContainerStyle list组件所在容器的样式
- listStyle list样式
- renderItem 设置提示项
- renderTextInput 自定义Input
完整示例
完整代码:GitHub - forrest23/ReactNativeComponents: React Native组件大全,介绍React Native常用组件的使用方法和使用示例
本次示例代码在 Component07文件夹中。请不要吝啬你们的Star!
组件地址
微信不让跳转外链,可以点击查看原文来查看外链GitHub内容。
举手之劳关注我的微信公众号:ReactNative开发圈
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。