React Native: панель поиска исчезает после ввода одной буквы - PullRequest
Новая
       6

React Native: панель поиска исчезает после ввода одной буквы

0 голосов
/ 10 апреля 2020

В моем проекте React Native я хочу создать список с возможностью поиска, как показано в этой статье.

Теперь, когда я копирую и вставляю код из здесь все работает нормально.

Но я должен внести некоторые изменения, чтобы использовать его в своем проекте. Например, мне не нужно извлекать случайные фиктивные данные, чтобы заполнить список, но у меня уже есть такие, которые намного проще структурированы. Кроме того, я хочу использовать функциональный компонент с хуками вместо классового компонента. (И я использую Native Base вместо Native-Elements для SearchBar, но это, похоже, не представляет никакой проблемы.)

Поэтому я преобразовал пример статьи, как указано выше, в Компонент Function, но теперь SearchBar- Печатание прервано.

Панель поиска теперь позволяет вводить только одну букву, затем клавиатура исчезает, и вам нужно снова щелкнуть поле ввода, чтобы продолжить ввод. Я абсолютно не знаю, что я делаю здесь не так. Я уже пытался работать с useEffect() Hook, но безуспешно. Вы можете мне помочь?

Вот анимированная задача:

enter image description here

А вот код: 

import React, {useEffect, useState} from 'react';
import {View, FlatList, ActivityIndicator, StyleSheet} from 'react-native';
import {Button, Header, Icon, Item, Input, Text} from 'native-base';

type Props = {};

const FlatListDemo: React.FC<Props> = ({}) => {
  const arrayholder = [
    {
      id: '1',
      name: 'Hopper',
      selected: false,
    },
    {
      id: '2',
      name: 'Dustin',
      selected: false,
    },
    {
      id: '3',
      name: 'Mike',
      selected: false,
    },
  ];
  const [data, setData] = useState(arrayholder);
  const [value, setValue] = useState('');

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

  const textChangedFunction = text => {
    setValue(text);
  };

  useEffect(() => {
    searchFilterFunction(value);
  }, [value]);

  const searchFilterFunction = text => {
    setValue(text);

    const newData = arrayholder.filter(item => {
      const itemData = `${item.name.toUpperCase()}`;
      const textData = text.toUpperCase();

      return itemData.indexOf(textData) > -1;
    });
    setData(newData);
  };

  renderHeader = () => {
    return (
      <Header searchBar rounded>
        <Item>
          <Icon name="ios-search" />
          <Input
            placeholder="Type Here..."
            onChangeText={text => textChangedFunction(text)}
            value={value}
          />
        </Item>
      </Header>
    );
  };

  return (
    <View style={{flex: 1}}>
      <FlatList
        data={data}
        renderItem={({item}) => (
          <ListItem title={`${item.name}`} subtitle={item.id} />
        )}
        ItemSeparatorComponent={renderSeparator}
        ListHeaderComponent={renderHeader}
      />
    </View>
  );
};

export default FlatListDemo;

Помощь будет высоко ценится!

...