¿Cómo realizar el inicio de sesión en React Native?

React Native es un marco de software de interfaz de usuario de código abierto creado por Meta Platforms, Inc. Se utiliza para desarrollar aplicaciones para Android, Android TV, iOS, etc. Siempre estamos buscando ciclos de desarrollo más cortos, un tiempo de implementación más rápido y mejores rendimiento de la aplicación. Y hay tantos marcos móviles híbridos como NativeScript, React Native, Ionic, Xamarin, PhoneGap, etc.

En este artículo, aprenderemos a iniciar sesión en React Native.

Logging: Es una forma rápida y sencilla de depurar tu aplicación en fase de desarrollo. Ayuda a obtener una idea del funcionamiento de la aplicación. Para realizar el registro, simplemente podemos usar las instrucciones console.log() para registrar la información o los indicadores requeridos.

Nota: elimine estas declaraciones de console.log() antes de que empujemos nuestro producto a la fase de desarrollo, ya que estas declaraciones simplemente crearán una sobrecarga allí.

Esto se puede hacer usando dos funciones.

• consola.log
• consola.advertir
• Reaccionar-nativos-registros

Para obtener más información sobre el registro, creemos una aplicación nativa de reacción:

Para crear una aplicación React-Native, utilizaremos la versión Expo CLI que será mucho más fluida para ejecutar sus aplicaciones React Native.

Expo: Es un framework y una plataforma para aplicaciones React universales. Es un conjunto de herramientas y servicios construidos alrededor de React Native y plataformas nativas que lo ayudan a desarrollar, construir, implementar e iterar rápidamente en iOS, Android y aplicaciones web desde la misma base de código JavaScript/TypeScript.

A continuación se muestra la implementación paso a paso del enfoque anterior.

Paso 1: Abra su terminal y ejecute el siguiente comando.

npm install -g expo-cli

Paso 2: ahora expo-cli está instalado globalmente, por lo que puede crear la carpeta del proyecto ejecutando el siguiente comando.

expo init "projectName"

Paso 3: Ahora ve a la carpeta creada e inicia el servidor usando el siguiente comando.

cd "projectName"

Paso 4: Instale la dependencia

npm install --save react-native-logs

Estructura del proyecto: Tendrá el siguiente aspecto:

 

Ejemplo 1: En este ejemplo, mostraremos un mensaje en la terminal usando console.log

Sintaxis:

console.log("content")

import React from 'react';
import { Text, View } from 'react-native';
  
export default function App() {
    console.log("App executed");
  
    return (
        <View >
            <Text style={{ 
                color: 'green', 
                fontWeight: 'bold', 
                fontSize: '30px' 
            }}>
                GeeksforGeeks
            </Text>
            <Text>
                Logging in React Native
            </Text>
        </View>
    );
}

Producción:

 

Explicación: Usando el método console.log(), uno puede iniciar sesión en la consola. Como puede ver en el ejemplo anterior, «Aplicación ejecutada», se está registrando en la consola.

Ejemplo 2: en este ejemplo, realizaremos el registro mediante console.warn. Esta función realiza el registro en un cuadro amarillo.

Sintaxis:

console.warn("content")

import React from 'react';
import { Text, View } from 'react-native';
  
export default function App() {
  
    console.warn("Hi Geek!! Lets code together!");
  
    return (
        <View >
            <Text style={{ 
                color: 'green', 
                fontWeight: 'bold', 
                fontSize: '30px' 
            }}>
                GeeksforGeeks
            </Text>
            <Text>
                Logging in React Native using console.warn
            </Text>
        </View>
    );
}

Producción:

 

Explicación: Como puede ver una advertencia en color amarillo, de esta manera podemos hacer un registro usando console.warn.

“Hola Friki!! ¡Codifiquemos juntos! “  se está registrando en un cuadro amarillo en la consola

Ejemplo 3: en este ejemplo, realizaremos el registro utilizando una dependencia llamada react-native-logs.

Esta dependencia ayuda a proporcionar algo de estilo a los registros. Tiene 4 formas; depuración, información, advertencia y error

Estos formularios se pueden ver en el siguiente ejemplo.

import React from 'react';
import { Text, View } from 'react-native';
import { logger } from 'react-native-logs';
  
export default function App() {
    var log = logger.createLogger();
  
    log.debug('I am a Debug log');
    log.info('I am a Info log');
    log.warn('I am a Warning log');
    log.error('I am a Error log');
    return (
        <View>
            <Text style={{ 
                color: 'green', 
                fontWeight: 'bold', 
                fontSize: '30px' 
            }}>
                GeeksforGeeks
            </Text>
              
            <Text>
                Logging in React Native 
                using react-native-logs
            </Text>
        </View>
    );
}

Producción: