Una Zambullida Profunda En La Lista Plana Nativa De Reaccionar

Considere una situación en la que desea mostrar una lista de artículos de una API. Por ejemplo, la respuesta de la API del café es similar a esta:

Una forma posible de ver esto para que el cliente debe usar el método del mapa en esta matriz de la siguiente manera:

const Fecha = getdatafromapi (); Retorno ( {Fecha ( ¡Sus datos fueron cargados! Aquí está el resultado: {Data.Map ((artículo) = (; En Data PROP, ingresará la matriz que desea mostrar. Los datos de JSON se pueden dar desde una API. La propiedad KeyExtractor recuperará una clave única para cada elemento en Matrix N.B., si su matriz contiene una clave o un campo de identificación, no necesita incluir esta propiedad. De forma predeterminada, Welllist buscará la clave de la clave o ID. Renderindem dirá reaccionar nativo Cómo representar los artículos en la muestra

Uso de la muestra

Ahora cubrimos la sintaxis, vamos a usarlo para que nuestra lista sea:

// Los datos de la matriz contienen nuestra matriz de artículos. Data Const = [{ID: 1, Título: «Black», Descripción: «»},…]; Const item = ({título, descripción}) = ( {título} {descripción} ); Const renderitem = ({{}) = (); RETURN (<Ver> {Fecha (<Data Flatlist Data = "{Fecha}" RenderItem = "{RenderItem}" KeyExtractor = "{(item) ="> Item.ID} /)} </Piso Lista> </Ver>) ;

Deconstruiremos esta pieza de código por parte:

El componente del elemento aceptará dos accesorios: título y descripción. Este componente los mostrará en la UI. La función de renderita representará el componente del artículo para cada elemento en la matriz. Como resultado, esto mostrará los campos de título y descripción de cada objeto. Además, PROP KEYEXTRANTOR dice reaccionar nativo que debe usar el campo ID como una clave. Al final, usamos la representación condicional para prestar datos con la lista plana reaccionar nativo

que muestre datos de una API

en el mundo real, reaccionen los desarrolladores nativos puede tener que lidiar con la representación de Datos de API en listas.

En el código a continuación, estamos obteniendo datos de la API de café y conectándolos a nuestro componente de Lista Flatlist:

Aplicación de función de exportación estándar () {Const [Fecha, SetData] = USESTATE (nulo); const getdata = async () = {const resp = Await fetch («https://api.sampleeapis.com/coffee/hot»); Data Const = espera a resp.json (); setdata (datos); }; // en el primer ensamblaje, busque datos. Se utiliza (() = {getData ();}, []); const item = ({título, descripción, índice}) = ( {índice}. {título} {descripción} ); Const renderitem = ({elemento, índice}) = (); Retorno ( {fecha ()} ); }

Algunas inferencias de este código:

Cuando el componente de la aplicación se traduce por primera vez, el RAAC invoca el método GetData. Esto hará que una solicitud llegue a la API. En la función Render, también estamos utilizando el argumento del índice. Este es el índice correspondiente al elemento actual en la nota de matriz que no estamos utilizando la propiedad KeyExtractor. Esto se debe a que un campo de identificación ya está presente, por lo que la lista plana la usará como la tecla

la tecla

la personalización de la lista plana

el componente de encabezado

Lista plana también tiene soporte para componentes de encabezado. Esto puede ser útil en los casos en que desea mostrar una barra de búsqueda en la parte superior de un inventario de contacto. ASP ListHeeReRCOMPonent puede ayudarlo a hacer esto:

Importar {divisor} de «React-Native-Elements»; Const encabezado = () = {retorno ( Lista de café

Footer Component

Considere una situación en la que el usuario se enrolla y desea regresar a aquí, Sería sensible mostrar un botón que le devolvería al cliente automáticamente. En este caso, puede adjuntar un componente de pie de página a su lista. Esto indicará que la lista se ha completado.

Puede hacer esto a través de PROP LISTFOOTERCOMPonente de la siguiente manera:

// Este será nuestro componente de pie de página const endcomponent = () = {retorno ( list );}; Retorno ( {fecha ()} );

separadores

Los componentes de la pestaña ayudan al usuario a distinguir cada elemento de la lista. Esto contribuye a una mejor experiencia y una interfaz de usuario.

para lograr esto, use La propuesta de componente del artículoSEPARATORIO de la siguiente manera:

const Separator = () = {return

const fecha = []; // Vaciar Array Const Manunempty = () = {return No regalo de regalo! ; }; RETURN ( {! Datos Cargando } {Fecha ()} );

Métodos de navegación de listas planas

Lista plana también incluye algunas funciones de utilidad para las operaciones relacionadas con Scrolling.

Desplácese hasta el final

Supongamos que tiene una lista que contiene cientos de elementos. Aquí, sería bueno mostrar un botón que permita al usuario descender al final. Esto resultará en una mejor experiencia de usuario porque el usuario no necesita rodar manualmente hasta el final, ahorrar tiempo.

Para hacer esto posible, puede usar el método de ScrollOnd de la siguiente manera:

Lista de const = Useref (NULL); Const press = () = {list.current.scrolltoend ({animated: true}); }; const encabezado = () = {retorno presione ()} title = «vaya al final» /; }; RETURN ( {! DATOS Carga } {Fecha ()} );

En este código de código, creamos un gancho USEREF que nos dará acceso a las funciones utilitarias de la lista plana. Cuando el usuario hace clic en el elemento del botón, la aplicación realiza el método de ScrollOnT.

Navegación a un elemento de índice específico

Podemos incluso desplazarse a un elemento específico llamando al método ScrolltoIndex de la siguiente manera:

const list = useref (null) ; Const press = () = {// Desplácese hasta el 12º elemento en el índice. list.current.scrolltoindex ({animado: verdadero, Índice: 12}); }; Const encabezado = () = {retorno

Presione ()} Título = «Ir al índice 12» /; }; RETURN ( {! DATOS Carga } {Fecha ()} );

En este código de código, le dijimos reaccionar que si el usuario hace clic en el botón, debe redirigir al usuario al décimo elemento en la matriz.

Prácticas recomendadas

Evite las funciones anónimas

Trate de evitar el uso de funciones anónimas en su lista plana. El equipo nativo de reacción sugiere esto para que la función no esté recreada cada vez que se muestre su lista. Esto ahorra memoria y recursos de CPU:

// Formas correctas: No Función anónima Const RenderItem = ({Artículo, índice}) = ( {índice}. {Item.title} ) {FECHA ( item.id} renderitem = {renderitem} /); } // el camino equivocado. Manténgase alejado: {Fecha ( item.id} renderitem = {({{}, índice}) = ( {índice} item.title } )} /); }

Componentes más ligeros

Los más pesados ??son los componentes, más memoria que ocupan. Muestra la información mínima posible sobre el elemento de la lista. Como un bono, esto hace que su IU se vea más limpio.

Incluso si tiene artículos que necesitan mostrar un montón de texto, puede usar la navegación de reacción. Si el usuario toca cualquier artículo, REACT lo dirigirá a una página separada que mostrará los detalles restantes. Aquí hay un ejemplo:

Conclusión

En este artículo, cubrimos el uso de la lista plana nativa de reacción, sus funciones útiles y opciones de personalización. Es un componente crucial si desea prestar listas en su aplicación nativa de reacción. Es una brisa absoluta para usar y es sólida como una roca.

¡Gracias por leer! Buena codificación.

Compartir