Question

我是React Native的新手，我正在使用NativeBase来构建我的演示应用程序。我无法使用nativebase创建自动完成搜索框。有人可以帮我举任何例子吗？我的要求： 1.圆形搜索框 2.单击后应显示取消按钮 3.输入2个字母后，应提供提供选项供用户选择 4.选择选项。

我在Google中搜索过。但是找不到任何满足我要求的东西。谁能帮忙。

Answer 1

您可以使用native-base-autocomplete的api来自react-native-auto-complete。查阅snack example的使用方法。

Answer 2

根据您的确切要求，您可以编写自己的代码。我试图编写自动完成功能。您可以签入Expo。

这是本机自动完成功能的基本代码。

import React, { Component } from 'react';
import { FlatList, StyleSheet, Text, TextInput, View, TouchableOpacity } from 'react-native';

export default class AutoCompleteBasics extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
      textInputFocus: false,
      arrayList: ['Apple', 'Mango', 'Guava', 'Muskmelon', 'Watermelon', 'Orange', 'Sapota']
    };
  }

  componentDidMount() {
    this.updateDataWithKey();
  }

  updateDataWithKey() {
    const { arrayList } = this.state;
    const dataWithKey = arrayList.map(data => {
      return {'key': data}
    });
    this.setState({dataWithKey, filterData: dataWithKey});
  }

  changeText(text) {
    this.setState({text});
    const { dataWithKey } = this.state;
    if (text !== '') {
      let filterData = dataWithKey.filter(obj => {
        return obj.key.toLowerCase().indexOf(text.trim().toLowerCase()) > -1;
      });
      if (filterData.length === 0) {
        filterData = [{key: 'No Filter Data'}];
      }
      this.setState({filterData});
    } else {
      this.setState({filterData: dataWithKey});
    }
  }

  onListItemClicked(text) {
    this.setState({
      text,
      textInputFocus: false,
      filterData: [{key: text}]
    });
  }

  renderRow(item) {
    return (
      <TouchableOpacity
        onPress={() => this.onListItemClicked(item.key)}
        style={styles.listItem}
      >
        <Text style={styles.item}>{item.key}</Text>
      </TouchableOpacity>
    );
  }

  handleInputFocus() {
    this.setState({textInputFocus: true});
  }

  handleInputBlur() {
    this.setState({textInputFocus: false});
  }

  render() {
    const { filterData, textInputFocus } = this.state;
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.textInput}
          onFocus={() => this.handleInputFocus()}
          onBlur={() => this.handleInputBlur()}
          placeholder="Search & Select List!"
          onChangeText={(text) => this.changeText(text)}
          value={this.state.text}
        />
        {textInputFocus &&
          <FlatList
            data={filterData}
            renderItem={({item}) => this.renderRow(item)}
          />
        }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 8,
    paddingTop: 12
  },
  textInput: {
    height: 40,
    marginLeft: 5,
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

nativebase autocomplete找不到

2 个答案: