React Native智能提示输入框组件

forrest23

发布于 2018-08-03 15:21:49

2.2K0

发布于 2018-08-03 15:21:49

文章被收录于专栏：React Native开发圈React Native开发圈

本文原创首发于公众号：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>