Construyendo Pull para actualizar Android iOS usando React Native

Tirar para actualizar es una función ampliamente adoptada en aplicaciones móviles. Facebook, Gmail, Instagram casi todas las aplicaciones populares tienen esta función en la que el usuario puede arrastrar la pantalla hacia abajo que le indica al servidor que envíe nuevos datos.

Ya hemos cubierto la implementación de desplazamiento infinito para Android e iOS. Mira el artículo aquí .

Requisitos previos y público objetivo

Desarrolladores que tengan un conocimiento básico del entorno de desarrollo y codificación de frontend y backend.

Comandos básicos de nodo y npm (para simulación de backend), configuración de expo (para implementación de frontend).

Por qué debería tener esta función

Hoy en día, considerando la facilidad con la que el usuario puede operar la aplicación, determina cuántos usuarios podrían estar usando su aplicación.

Además, limpia la interfaz de usuario más agradable es la aplicación para el usuario. Ahora suponga que el feed de su página está cargado, pero ahora el usuario quiere volver a cargar el feed para comprobar si hay elementos nuevos en su feed.

Entonces, como usuario, será muy conveniente desplegar la parte superior de la página y volver a cargar en lugar de volver a abrir la aplicación.

El flujo de la aplicación

Vamos a desarrollar nuestra aplicación móvil que se ejecutará en Android e iOS. Vamos a utilizar el marco nativo react.

Para el servidor backend, usaremos un servidor simulado simple de Nodejs. Puede reemplazar lo mismo con datos reales con algunos ajustes y reutilizar el código.

Tras cada solicitud de extracción para actualizar, el servidor de Nodejs proporcionará el nuevo conjunto de datos simulado para mostrar en la aplicación.

Codifiquemos.

Configuración de backend

Cree un nuevo directorio y cambie a él usando la terminal.

Cree un nuevo proyecto de nodo usando el siguiente comando.

$ npm init –y

Instale las dependencias necesarias con el siguiente comando.

$ npm i –S express

Cree un nuevo archivo y asígnele el nombre app.js y copie / pegue el siguiente código.

app.js
const express = require ( ‘express’ )
const app = express ( )
const router = express. Enrutador ( )


enrutador.
get ( ‘/ fetch-paginated-data’ , ( req , res ) => {
    var pageNo = parseInt ( req. query . pageNo )
    var pageSize = parseInt ( req. query .pageSize )
    // comprobar si el número de página no es válido
    if ( pageNo <= 0 ) {
        var response = {

            success
: false ,

            message
: ‘Invalid Page Number’
        } ;
        volver res. estado ( 200 ) . json ( respuesta ) ;
    } else {
        // obtiene datos de la base de datos según el número de página y el tamaño de página dados
        var index = ( parseInt (pageNo 1 ) * parseInt ( pageSize ) ) + 1 ;
        var list = [ ] ;
        para ( var i = 0 ; i < pageSize 1 ; i ++ ) {

            list.
push ( {

                índice
: índice ,

                datos
: ‘Datos’ + índice
            } ) ;

            índice
++;
        }
        var respuesta = {

            éxito
: verdadero ,

            lista
: lista
        } ;
        volver res. estado ( 200 ) . json ( respuesta ) ;
    }

} ) ;


aplicación.
use la aplicación ( ‘/’ , enrutador )


.
escuchar ( 3000 ) ;

Ejecute la aplicación backend:

nodo app.js

Ahora tenemos una simulación de backend lista que seguirá brindándonos datos para cualquier número de página y cualquier solicitud de tamaño de página.

Construyendo la aplicación móvil

Vamos a utilizar el marco nativo react para codificar nuestra aplicación móvil. Podemos utilizar varias herramientas para utilizar este marco. En este tutorial usaremos expo .

Puede instalar expo cli si aún no lo ha hecho ejecutando el siguiente comando.

$ npm i expo-cli –global

Luego, cree un nuevo proyecto de expo usando el siguiente comando.

$ expo init

Te hará dos preguntas. Complete el nombre correcto y la URL slug de su aplicación.

? Elija un nombre de proyecto: pull_to_refresh_infinite_scroll_demo

?
Elija una plantilla: expo-template-blank

Ahora cambie a la carpeta e instale las dependencias.

npm i –save axios native-base @ expo / vector-icons –save

Abra App.js y copie / pegue el siguiente código.

App.js
importar Reaccionar desde ‘reaccionar’ ;
importar { StyleSheet , ActivityIndicator , View , RefreshControl } desde ‘react-native’ ;
importar { Contenedor , Contenido , Texto , Lista } desde ‘base nativa’ ;
importar axios de ‘axios’ ;

exportar clase predeterminada La aplicación extiende React. Componente {
  constructor
( accesorios )

{
    super ( apoyos ) ;
    // inicializa los valores de estado
    this . state = {

      pageNo
: 1 ,

      pageSize
: 20 ,

      showLoadingMore
: false ,

      data
: [ ] ,

      loadMoreData
: true , // para indicar si se llega al final de la lista

      shouldHit
: true , // si es necesario recuperar más datos

      dataReceived
: false , // si se obtienen los datos iniciales

      actualizando
: falso
    }
  }

  componentWillMount
= ( ) => {
    this . fetchData ( ) ;
  }

  // función para obtener más datos según el número de página actual

  fetchData
= ( ) => {
    if ( this . state . pageNo ! = 1 ) {
      // cuando intentamos obtener más datos, muestra el cargador en la parte inferior
      this . setState ( {

        showLoadingMore
: true
      } )
    }
    var systemIPAddress = ‘192.168.1.25’ ; // agrega tu IP.
    var url = ‘http: //’ + systemIPAddress + ‘: 3000 / fetch-paginated-data? pageNo =’ + esto . estado . pageNo + ‘& pageSize =’ + esto . estado . pageSize ;

    axios


      .
obtener ( url )

      .
entonces ( respuesta => {
        if ( respuesta. datos . éxito ) {
          // agregue datos a la lista y cambie el estado para generar contenido nuevo

          dejarecibidoDataList
= respuesta. datos . lista ;

          deje currentDataList
= this . estado . datos ;
          // añadir a la lista existente

          let newDataList
= currentDataList. concat (lista de datos recibida ) ;
          // renderizar una nueva lista
          // una vez que se establece una nueva lista, estamos listos para cargar más datos si se llega al final

          deje loadMoreData
= true ;
          si ( este . estado . refrescante ) {
            este . setState ( {

              pageNo
: this . state . pageNo + 1 ,

              data
: newDataList ,

              dataReceived
: true ,

              loadMoreData
: loadMoreData ,

              showLoadingMore
: false ,

              refrescante
: falso
            } )
          } else {
            esto . setState ( {

              pageNo
: this . state . pageNo + 1 ,

              data
: newDataList ,

              dataReceived
: true ,

              loadMoreData
: loadMoreData ,

              showLoadingMore
: false ,
            } )
          }
         
        } else {
          // no hay más datos para cargar
          esto . setState ( {

            shouldHit
: false ,

            showLoadingMore
: false ,

            refreshing
: false
          } )
        }
      } )

      .
catch ( error => {

        consola.
log ( error )
      } ) ;
  }


  onRefreshHandler
= ( ) => {
    // restablecer pageNo a 1
    this .setState ( { refrescante : verdadero , número de página : 1 , datos : [ ] , datos recibidos : falso } ) ;

    let reactNativeInstance
= this ;
    // tiempo de espera para simular la carga

    setTimeout
( ( ) => {

      reactNativeInstance.
fetchData ( ) ;
    } , 100 ) ;
   
  }


  render
( ) {
   
    constisCloseToBottom = ( { layoutMeasurement , contentOffset , contentSize } ) => {
      const paddingToBottom = 40 ;

      let result
= layoutMeasurement. altura + contentOffset. y > = contentSize. altura paddingToBottom ;
      // verdadero si se llega al final, de lo contrario,
      devuelve el resultado falso ;
    } ;

    // mostrar inicialmente el cargador en el centro

    let listSection
=
    <Ver estilo = { estilos. contenedor } >
      < ActivityIndicator size = “large” color = “# 0000ff” />
    Ver >

    if ( this . state . dataReceived ) {
      if ( this . state . data . length > 0 ) {

        listSection
= this

          .
estado

          .
datos

          .
mapear (( record ) => {
            return (
              < View key = { record. index } style = { [ styles. container , { margin : 10 , height : 40 , borderWidth : 1 , borderColor : ‘black’ } ] } >
                < Text > { registro. índice } . { registro. datos }Texto >
              Ver >
            ) ;
          } )
      } else {

        listSection
= null ;
      }
    }

    if ( this . state . refreshing ) {
      return (
        < View style = { styles. container } >
          < Text > Refreshing Please Wait … Text >
        View >
      )
    } else if ( this . state. dataReceived && this . estado . datos . length == 0 ) {
      return (
        < View style = { styles. container } >
          < Text > No hay registros para mostrar Texto >
        Ver >
      )
    } else {
      return (
        < Container style = { { marginTop : 40 } } >
          < Content

          refreshControl
= {
            < RefreshControl

            refreshing
= { this . estado . refrescante }

            onRefresh
= { esto . onRefreshHandler }
          />
          }

          onScroll
= { ( { nativeEvent } ) => {
            if ( isCloseToBottom ( nativeEvent ) ) {
              // evitar múltiples accesos al mismo número de página
              if ( this. estado . loadMoreData ) {
                // fondo alcanzado comienza a cargar datos
                this . setState ( {

                  loadMoreData
: false
                } )
                esto . fetchData ( ) ;
              }
             
            }
          } } >
            < Lista >
              { listSection }
            Lista >
            { esto . estado . showLoadingMore ? < ActivityIndicator size = “large” color =“# 0000ff” />: null }
           
          Contenido >

        Contenedor >
      )
    }

  }
}

const styles = StyleSheet. create ( {

  contenedor
: {

    flex
: 1 ,

    backgroundColor
: ‘#fff’ ,

    alignItems
: ‘center’ ,

    justifyContent
: ‘center’ ,
  } ,
} ) ;

Tire para actualizar Explicación

Importe y configure el componente RefreshControl como un atributo JSX para el componente base nativo de contenido.


         refreshControl = {

           
           refreshing = {this.state.refreshing}


           onRefresh = {this.onRefreshHandler}


         />

El componente RefreshControl tiene dos atributos:

  1. refrescante: cuando es verdadero implica que el usuario ha intentado actualizar la lista.
  2. onRefresh: apunta al controlador que maneja la ejecución cuando el usuario hace clic en actualizar.

El controlador para el evento onRefresh restablece varios valores de estado a los valores iniciales y el código es el siguiente:

onRefreshHandler = () => {

   // restablecer pageNo a 1


   this.setState ({refrescante: verdadero, pageNo: 1, datos: [], dataReceived: falso});


   let reactNativeInstance = this;


   // tiempo de espera para simular la carga


   setTimeout (() => {


     reactNativeInstance.fetchData ();


   }, 300);  


 }

Ejecutemos la aplicación.

$ npm inicio

Se abrirá una nueva ventana del navegador, algo como esto.

Descargue la aplicación móvil expo disponible en Google Play y la tienda iTunes. Aqui esta el link.

https://play.google.com/store/apps/details?id=host.exp.exponent&hl=en (para teléfonos Android)

https://itunes.apple.com/us/app/expo-client/id982107779? mt = 8 (para iPhone)

Escanee el código QR con la aplicación expo y nuestra aplicación personalizada se ejecutará en su teléfono móvil.

Aquí está el enlace del video de demostración.

Conclusión

Si su aplicación móvil está manejando datos, entonces la función de extracción para actualizar es imprescindible. Es interactivo, útil y la gente ya sabe cómo usarlo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *