react native complete flatlist

reaccion-nativo-plateado

Versión extendida de React Native Flat List con muchas funciones incorporadas, como búsqueda, tirar para actualizar, no hay datos disponibles en la fila vacía

Precaución:

renderItem Props de retorno item y parámetros index El parámetro item Devuelve un solo elemento en la matriz item . Pero si el texto de búsqueda no está vacío, los accesorios de Dan Dan highlightColor se establecen en cualquier color, el parámetro item devolverá una nueva estructura del objeto JSON (para representar el texto resaltado en JSX). Esto podría romper tu lógica. Por lo tanto, si desea acceder a la estructura original de sus datos, estará en item.cleanData . Recuerde, item.cleanData solo existe si los accesorios highlightColor y la búsqueda no están vacíos (el usuario está buscando)

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;

Actualización de V 1.xx a V 2.xx

Cambiar de renderItem={(data, index) => {} } a renderItem={({item, index, separators}) => {} } (similar como el encendido en la lista plana original)

Propiedades

Todos los accesorios de la lista plana deberían funcionar más los accesorios mencionados a continuación

Apuntalar	Tipo	Descripción	Por defecto	Requerido
showSearch	booleano	Si se define true (y se define el searchKey ), se mostrará la barra de búsqueda.	verdadero	Opcional
isJelly	booleano	Si true , cuando el usuario se desplaza, la lista se expandirá un bit Lil, y cuando el usuario detenga la arrastre, la lista volverá al tamaño original (iMessage en el estilo de iPhone)	FALSO	Opcional
slide	cadena	Animación Cómo cada elemento entran en la lista. Puede ser "ninguno", "izquierda" o "derecha"	none	Opcional
data	matriz de objetos	Los datos a representar en la lista	[]	Requerido (vamos, por supuesto que necesitas datos para esto)
backgroundStyles	objeto de estilo	Estilo del fondo de lista plana	nulo	Opcional
searchBarBackgroundStyles	objeto de estilo	Estilo del fondo de búsqueda de barras de búsqueda	nulo	Opcional
pullToRefreshCallback	función	Función de devolución de llamada cuando el usuario se refresca para actualizar	nulo	Opcional (Tirar para actualizar no estará disponible si esto no se suministra
isLoading	booleano	Si es cierto, la carga se mostrará en la parte superior de la lista.	FALSO	Opcional
renderItem	función que devuelve un elemento JSX (al igual que ListView de RN y FlatList)	Plantilla de una fila en la lista plana	NULL (Abra para PR si alguien desea hacer una plantilla predeterminada para esto)	Requerido (ya que todavía no hago una plantilla predeterminada)
renderSeparator	Función que devuelve un elemento JSX para que se entregue entre filas (al igual que ListView de RN y FlatList)	Plantilla de separador en la lista plana	() => <View style={{ height: 1, width: "80%", alignSelf: "center", backgroundColor: "#f2f2f2" }} />	Opcional
placeholder	cadena	Marcador de posición del campo de búsqueda	"Buscar ..."	Opcional
searchTextInputStyle	Objeto (estilo para el componente TextInput de React Native)	Estilo para el campo de búsqueda	nulo	Opcional
highlightColor	color	Color del fondo de palabras resistentes cuando coincida con la palabra clave de búsqueda. Lea la precaución previa si usa este accesorio sobre el readme	amarillo	Opcional
searchKey	variedad de cuerdas	Este debería ser el nombre de las claves disponibles en los datos que se utilizarán para buscar. Si no se suministra este accesorio, la entrada de texto de búsqueda no se representará. **Warning: nested key not yet supported	[]	Opcional (si no se suministra, el campo de búsqueda no aparecerá)
elementBetweenSearchAndList	Elemento JSX	Qué renderizar entre SearchBar y la lista	nulo	Opcional
refreshOnLoad	booleano	Si es true , se llamará a PROP pullToRefreshCallback si está disponible	verdadero	Opcional
onSearch	función que reemplazará pullToRefreshCallback	Si existe, pullToRefreshCallback se anulará. Esto no se activará en la tecla Presione, pero en la tecla de retorno presionada. Estos accesorios se introducen si el resultado del activador de búsqueda de API. Si solo desea una búsqueda local (búsqueda de una matriz existente), no es necesario estos accesorios. onSearch obtendrá el parámetro automático keyword	() => nulo	Opcional
loadNext	función	Si se define, esta función se llamará cuando el usuario despliegue la lista plana a la parte inferior. El USECase es llamar a la próxima paginación de su API. Si se define, el icono de carga se mostrará en la parte inferior de la lista. Para ocultar el icono de carga, asegúrese de que este accesorio esté indefinido	indefinido	Opcional
refreshControlProps	objeto	accesorios para refreshcontrol	indefinido	Opcional

Métodos

Si tiene ref en el componente,

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

o en componentes basados ​​en

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

Puede usar cualquier método a continuación: completeFlatList.current.methodName()

o en componentes basados ​​en

this.completeFlatList.methodName()

Método	Descripción
ClearSearch	Borrar la entrada de búsqueda programáticamente