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>

主要參數說明

• containerStyle 組件所在容器的樣式
• hideResults 當爲true時隱藏自動提示
• data 自動提示數據源（數組）
• inputContainerStyle input組件所在容器的樣式
• listContainerStyle list組件所在容器的樣式
• listStyle list樣式
• renderItem 設置提示項
• renderTextInput 自定義Input

完整示例

完整代碼：GitHub - forrest23/ReactNativeComponents: React Native組件大全，介紹React Native經常使用組件的使用方法和使用示例
本次示例代碼在 Component07文件夾中。請不要吝嗇大家的Star！

組件地址

GitHub - l-urence/react-native-autocomplete-input: Pure javascript autocomplete input for react-native

微信不讓跳轉外鏈，能夠點擊查看原文來查看外鏈GitHub內容。

舉手之勞關注個人微信公衆號：ReactNative開發圈