Как сделать панель поиска с выпадающим списком в реагирующем родном? - PullRequest
Новая
       44

Как сделать панель поиска с выпадающим списком в реагирующем родном?

0 голосов
/ 22 февраля 2020

Я хочу создать панель поиска с выпадающим списком с реагирующим родным, больше похоже на это изображение enter image description here

Я знаю, что есть много библиотек, которые облегчает мою задачу, но я только начал с response-native, поэтому, насколько мне известно, я хочу знать, как все это делается.

Я наткнулся на уроки о том, как создать панель поиска с живым поиском и обновить плоский список. путем фильтрации данных на основе вашего поиска, но ни один из них не имеет раскрывающегося списка.

Обновление кода моего плоского списка на основе поискового слова уже выполнено, мне нужно просто отобразить этот плоский список в форме раскрывающегося списка .

Будет полезна ссылка на учебник или пример кода.

1 Ответ

1 голос
/ 22 февраля 2020

Проверьте ниже пример, который я создал, используя flatlist и TextInput . Элементы отображаются в виде раскрывающегося списка при поиске элементов. Я думаю, что это поможет вам. 

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

class FlatListDropDown extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
      value: '',
    };

    this.arrayNew = [
      { name: 'Robert' },
      { name: 'Bryan' },
      { name: 'Vicente' },
      { name: 'Tristan' },
      { name: 'Marie' },
      { name: 'Onni' },
      { name: 'sophie' },
      { name: 'Brad' },
      { name: 'Samual' },
      { name: 'Omur' },
      { name: 'Ower' },
      { name: 'Awery' },
      { name: 'Ann' },
      { name: 'Jhone' },
      { name: 'z' },
      { name: 'bb' },
      { name: 'cc' },
      { name: 'd' },
      { name: 'e' },
      { name: 'f' },
      { name: 'g' },
      { name: 'h' },
      { name: 'i' },
      { name: 'j' },
      { name: 'k' },
      { name: 'l' },
    ];
  }

  renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: '100%',
          backgroundColor: '#CED0CE',
        }}
      />
    );
  };

  searchItems = text => {
    const newData = this.arrayNew.filter(item => {
      const itemData = `${item.name.toUpperCase()}`;
      const textData = text.toUpperCase();
      return itemData.indexOf(textData) > -1;
    });
    this.setState({
      data: newData,
      value: text,
    });
  };

  renderHeader = () => {
    return (
      <TextInput
        style={{ height: 60, borderColor: '#000', borderWidth: 1 }}
        placeholder="   Type Here...Key word"
        onChangeText={text => this.searchItems(text)}
        value={this.state.value}
      />
    );
  };

  render() {
    return (
      <View
        style={{
          flex: 1,
          padding: 25,
          width: '98%',
          alignSelf: 'center',
          justifyContent: 'center',
        }}>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <Text style={{ padding: 10 }}>{item.name} </Text>
          )}
          keyExtractor={item => item.name}
          ItemSeparatorComponent={this.renderSeparator}
          ListHeaderComponent={this.renderHeader}
        />
      </View>
    );
  }
}

export default FlatListDropDown;

Не стесняйтесь сомнений

...