Menú

PlayAgain

Javascript, React Native, programación y reviews

Búsqueda en una ListView con React Native

Para poder crear una caja de búsqueda en nuestra ListView deberemos usar el componente InputText que podemos llamar directamente desde el import de React Native. Dependiendo de cual sea la fuente de nuestros datos para la ListView deberemos plantear el problema de dos formas diferentes o bien usando fetch para la API o pasándole los datos directamente a la ListView.

Filtraremos los datos, tanto si son de una API o bien de un archivo local, a partir del texto que introduciremos en el InputText. Para ello usaremos una función y Javascript que nos permitirá rehacer la ListView en tiempo real cada vez que escribimos en el Input.

Búsqueda en una ListView en React Native a partir de una API

Empezaremos importando el componente y creando la interfaz de la ListView, que sirve para las dos versiones:

Hemos creado los componentes que usaremos, le hemos dado estilo y usado el componente Dimensions para conseguir el ancho del dispositivo que estuviésemos usando.

Ahora tenemos un constructor donde inicializaremos los estados de dataSource y rawData. DataSource será el contenedor para los datos de nuestra ListView, mientras que rawData copia los datos que llegan de la API a través de la función fetchData, para que luego podamos manipularlos. Usamos componentWillMount porque nos permite pasarle la función fetchData que se ejecutará nada más se carguen todos los componentes.

Le pasamos la propiedad dataSource con el estado dataSource  a la ListView y usando renderRow crearemos una función que se encargará de mostrar lo que hay en cada row.

A renderRow le pasamos el parametro rowData donde está toda la información que extraemos de la API, usamos el componente TouchableHighlight que hay que importar en react-native y ya solo nos queda llamar a los diferentes datos que queremos mostrar.

Ahora para poder filtrar los datos con el InputText crearemos dos funciones filterSearch al que le pasaremos el texto del input y que guardamos el contenido del input en un estado llamado text, y luego llamamos a la función dataFilter que tiene dos parámetros, text y data (rawData, la copia que hemos creado cuando hemos hecho el fetch) que usando la función filter recorre el array de objetos y si hay coincidencia con el texto que escribimos mostrará esos objetos.

Una vez filtrado los datos volveremos a llamar a this.setState para que guarde la nueva información en el dataSource y que genere la lista, esto ocurrirá cada vez que escribamos una letra.

Para terminar llamaremos a la función filterSearch con la propiedad onChangeText en el TextInput.

Búsqueda en una ListView en React Native a partir de un archivo de datos locales.

El código completo podéis encontrarlo aquí