react native complete flatlist

React-native-complete-flatlist

Versão estendida da lista plana do React com muitos funções integradas, como pesquisa, puxar para atualizar, sem mensagem de dados disponível se a linha vazia

Cuidado:

renderItem Props Retorno item e parâmetros index O parâmetro item retorna um único elemento na matriz item . Mas se o texto da pesquisa não estiver vazio Dan highlightColor adereços estiver definido como qualquer cor, o parâmetro item retornará uma nova estrutura do objeto JSON (para renderizar texto destacado no JSX). Isso pode quebrar sua lógica. Portanto, se você deseja acessar a estrutura original de seus dados, ele estará no item.cleanData . Lembre -se de que item.cleanData só existe se os adereços highlightColor e o campo de pesquisa não estiverem vazios (o usuário está pesquisando)

Uso:

 import React, {useRef} from 'react';
import { Text, SafeAreaView, TouchableOpacity } from 'react-native';
import CompleteFlatList from 'react-native-complete-flatlist';

const list = [
  { name: 'Fattah', status: 'Active', time: '8:10 PM', date: '1 Jan 2018' },
  { name: 'Syah', status: 'Active', time: '9:14 PM', date: '1 Dec 2018' },
  { name: 'Izzat', status: 'Active', time: '8:15 PM', date: '1 Jan 2018' },
  { name: 'Ali', status: 'Active', time: '8:10 PM', date: '1 Jan 2018' },
  { name: 'Abu', status: 'Active', time: '8:11 PM', date: '1 Jan 2018' },
  { name: 'Fitri', status: 'Active', time: '8:20 PM', date: '1 Jan 2018' },
  { name: 'Armi', status: 'Active', time: '8:33 PM', date: '1 Jan 2018' },
  { name: 'Eidit', status: 'Active', time: '9:10 PM', date: '1 Jan 2018' },
  { name: 'Hamdan', status: 'Active', time: '10:10 PM', date: '1 Jan 2018' },
  {
    name: 'Muhyiddeen',
    status: 'Blocked',
    time: '10:10 PM',
    date: '9 Feb 2018',
  },
];

const App = () => {
  const ref = useRef();
  const renderItem = ({item, index}) => {
    const data = item.cleanData ? item.cleanData : item;

    console.log('item (if search bar is not empty and prop highlightColor is not empty, item will contains extra data to enable highlight feature)', item);
    console.log('cleanData (if search bar is not empty and prop highlightColor is not empty, cleanData will contain original data structure without extra data)', item.cleanData);


    console.log('this is index number : ' + index);

    console.log(data + ' this is original data');

    return <Text>{item.name}</Text>;
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <CompleteFlatList
        searchKey={['name', 'status', 'time', 'date']}
        pullToRefreshCallback={() => console.log('refreshing')}
        data={list}
        // renderSeparator={null}
        ref={ref}
        highlightColor="yellow"
        renderItem={renderItem}
      />
      <TouchableOpacity onPress={() => ref.current.clearSearch()} style={{ padding: 5 }}>
        <Text>Clear Search</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

export default App;

Atualização de V 1.xx para V 2.xx

Altere de renderItem={(data, index) => {} } para renderItem={({item, index, separators}) => {} } (semelhante ao outro na lista plana original)

Propriedades

Todos os adereços de lista plana devem funcionar mais adereços mencionados abaixo

Prop	Tipo	Descrição	Padrão	Obrigatório
showSearch	booleano	Se true (e searchKey Prop for definido), a barra de pesquisa será mostrada.	verdadeiro	Opcional
isJelly	booleano	Se for true , quando o usuário rolar, a lista expandirá um bit lil e, quando o usuário parar de arrastar, a lista voltará ao tamanho original (iMessage no estilo do iPhone)	falso	Opcional
slide	corda	Animação como todos os itens entram na lista. Pode ser "nenhum", "esquerda" ou "certo"	none	Opcional
data	Matriz de objetos	Dados a serem renderizados na lista	[]	Necessário (vamos lá, é claro que você precisa de dados para isso)
backgroundStyles	objeto de estilo	Estilo de fundo planície	nulo	Opcional
searchBarBackgroundStyles	objeto de estilo	Estilo de fundo da barra de pesquisa	nulo	Opcional
pullToRefreshCallback	função	Função de retorno de chamada quando o usuário puxa para atualizar	nulo	Opcional (puxe para atualizar não estará disponível se isso não for fornecido
isLoading	booleano	Se verdadeiro, o carregamento será mostrado na parte superior da lista.	falso	Opcional
renderItem	função que retorna um elemento JSX (assim como o RN's ListView e o Flatlist)	Modelo de uma linha na lista plana	null (aberto para PR se alguém desejar fazer modelo padrão para isso)	Necessário (já que eu ainda não faço modelo padrão)
renderSeparator	função que retorna um elemento JSX a ser renderizado entre linhas (assim como o RN's ListView e o Flatlist)	Modelo de separador na lista plana	() => <View style={{ height: 1, width: "80%", alignSelf: "center", backgroundColor: "#f2f2f2" }} />	Opcional
placeholder	corda	Espaço reservado do campo de pesquisa	"Procurar ..."	Opcional
searchTextInputStyle	objeto (estilo para o componente textinput do react)	estilo para campo de pesquisa	nulo	Opcional
highlightColor	cor	cor das palavras higlighted Background quando corresponde a uma palavra -chave de pesquisa. Por favor, leia a pré -cuidado se estiver usando este suporte em cima do readme	amarelo	Opcional
searchKey	Matriz de string	Isso deve ser o nome das chaves disponíveis nos dados que serão usados ​​para pesquisar. Se este suporte não for fornecido, a entrada de texto da pesquisa não será renderizada. **Warning: nested key not yet supported	[]	Opcional (se não for fornecido, o campo de pesquisa não aparecerá)
elementBetweenSearchAndList	Elemento JSX	O que renderizar entre a SearchBar e a lista	nulo	Opcional
refreshOnLoad	booleano	Se true , o pullToRefreshCallback será chamado se disponível	verdadeiro	Opcional
onSearch	função que substituirá pullToRefreshCallback	Se existir, pullToRefreshCallback será substituído. Isso não será acionado no press repam, mas na tecla de retorno pressionada. Este adereço é introduzido se o acionador de pesquisa resultar da API. Se você deseja apenas pesquisa local (pesquise da matriz existente), esse adereço não é necessário. onSearch receberá o parâmetro keyword automático	() => nulo	Opcional
loadNext	função	Se definido, essa função será chamada quando o usuário rolar a lista de planas na parte inferior. A USECASE é ligar para a próxima paginação da sua API. Se definido, o ícone de carregamento será mostrado na parte inferior da lista. Para ocultar o ícone de carregamento, verifique se este suporte está indefinido	indefinido	Opcional
refreshControlProps	objeto	adereços para refreshcontrol	indefinido	Opcional

Métodos

Se você tem ref ao componente,

 const completeFlatList = useRef();
...
 <CompleteFlatList
   ...
    ref={completeFlatList}
   ...
 />

ou baseado em componentes

<CompleteFlatList
   ...
   ref={c => this.completeFlatList = c}
   ...
/>

Você pode usar qualquer método (s) abaixo: completeFlatList.current.methodName()

ou baseado em componentes

this.completeFlatList.methodName()

Método	Descrição
ClearSearch	Clear pesquisa de pesquisa programaticamente