Entonces, desea poder crear aplicaciones móviles tanto para Android como para iOS. ¿Qué deberías aprender? ¿Los idiomas nativos individuales para cada aplicación, es decir, Java para Android y Swift / Objective-C para iOS ?, en realidad NO
El desarrollo nativo de Android e iOS son bastante diferentes y pueden ser costosos: primero, el lenguaje en sí es bastante diferente y, segundo, todas las API subyacentes son diferentes: la forma de usar el GPS es diferente, la forma de crear animaciones es diferente, la forma haces llamadas de red es diferente.

Siempre buscamos ciclos de desarrollo más cortos, un tiempo de implementación más rápido y un mejor rendimiento de la aplicación. Y hay tantos marcos móviles híbridos como NativeScript, React Native, Ionic, Xamarin, PhoneGap, etc. Me centraré más en Reaccionar nativo. Entonces,

¿Qué es React Native?
Reaccionar nativo es un marco desarrollado por Facebook para crear aplicaciones de estilo nativo para iOS y Android bajo un lenguaje común, JavaScript. Inicialmente, Facebook solo desarrolló React Native para admitir iOS. Sin embargo, con su reciente compatibilidad con el sistema operativo Android, la biblioteca ahora puede representar interfaces de usuario móviles para ambas plataformas.

¿Por qué React Native?

Siempre que haya una actualización para aplicaciones escritas en Swift / Objective-C o Java, es necesario volver a compilar toda la aplicación y distribuir una nueva versión a la App Store nuevamente. Todo esto puede llevar algunas semanas dependiendo del proceso de revisión de la App Store.

Para evitar esta molestia, las aplicaciones React Native funcionan de una manera diferente, una aplicación nativa puede localizar código JavaScript específico, que luego se descarga y compila cuando la aplicación se inicia en un dispositivo real. De esta manera, la actualización de la aplicación se puede realizar instantáneamente sin necesidad de enviar una nueva versión a la App Store una y otra vez.

¿Cómo construir una aplicación React Native?

Construir con React Native es extremadamente eficiente y altamente adictivo, pero comenzar puede ser un poco complicado. Reaccionar usos nativos Node.js, un tiempo de ejecución de JavaScript, para crear su código JavaScript. Si aún no tiene Node.js instalado, ¡es hora de obtenerlo!

Lo primero que tendremos que hacer es instalar Reaccionar nativo
La guía vinculada anteriormente proporciona instrucciones para usuarios de Mac, Windows y Linux, así como instrucciones para preparar sus entornos Android e iOS.
Para los usuarios de Mac, debería estar listo después de ejecutar los siguientes tres comandos: Para usuarios de Windows o Linux, siga la guía vinculada anteriormente.

Primera instalación Cerveza casera siguiendo las instrucciones del sitio web de Homebrew, luego ejecute los siguientes comandos en una Terminal después de instalar Homebrew:

brew install node

A continuación, instale sereno, un observador de archivos de Facebook:

brew install watchman

React Native lo usa para averiguar cuándo cambia su código y reconstruirlo en consecuencia. Es como hacer que Xcode haga una compilación cada vez que guarde su archivo.

Luego use npm para instalar la herramienta React Native Command Line Interface (CLI):

npm install -g react-native-cli

Esto usa el Administrador de paquetes de nodo para obtener la herramienta CLI e instalarla globalmente.

Una vez que haya completado la instalación de React Native, podemos seguir adelante y crear nuestro proyecto:

react-native init GeeksForGeeks

Esto crea un proyecto que contiene todo lo que necesita para construir y ejecutar una aplicación React Native.

Algunas cosas a tener en cuenta aquí:
1) React Native usa npm para la gestión de paquetes, de ahí el directorio node_modules.

2) Los directorios de Android e iOS contienen sus proyectos típicos de Android / iOS, que se pueden abrir y ejecutar en Android Studio / Xcode, respectivamente.

3) Los archivos index.android.js e index.ios.js contienen el punto de entrada principal de nuestro código fuente React Native para Android e iOS.

Continúe y ejecute la aplicación en su dispositivo / simulador preferido usando los siguientes comandos:
Para iOS:

react-native run-ios 

Para Android :

react-native run-android

Notará que se abre una nueva ventana de terminal que está ejecutando el empaquetador React Native. Puede simplemente dejar que esta terminal se ejecute en segundo plano, y se encargará del empaquetado y la recarga en vivo de la aplicación a medida que escribe su código React Native.

Ahora, asumiendo que todo se configuró correctamente (si no solo desbordamiento de pila el error), debería ver algo así:

Para usuarios de Android:

Para usuarios de iOS:

A primera vista, la fuente de una aplicación React parece un extraño documento XML o HTML que se compone de varios componentes. Detrás del capó, estas son clases de JavaScript que extienden el React.Component y se representan entre sí gracias a la sintaxis JSX.

Pero comenzaremos desde cero para comprender mejor cómo funciona la aplicación. Así que, ve y borra el contenido del index.android.js y index.ios.js archivos.

Es realmente una molestia tener que duplicar el código en el index.android.js y index.ios.js archivos. Pero, afortunadamente, tenemos la capacidad de importar código fuente de otros paquetes. Entonces, creemos un nuevo directorio src / y un archivo GeeksForGeeks.js dentro:

Muy bien, ahora comenzaremos importando algunos paquetes que necesitaremos para comenzar.

import React, { Component } from 'react';

import {

    Text,

    AppRegistry

} from 'react-native';

Aquí solo estamos importando React y Component desde el paquete react, y Text y AppRegistry desde el paquete react-native.

Ahora, podemos seguir adelante y definir nuestro GeeksForGeeks componente. Un componente es esencialmente una vista que puede contener subvistas y subcomponentes.

class GeeksForGeeks extends Component {

 

    render() {

        return (

            <Text>GeeksForGeeks is Awesome!</Text>

        )

    }

 

}

GeeksForGeeks subclasifica la clase Component y anula la función de renderizado para renderizar su UI. Por ahora, estamos renderizando un simple GeeksForGeeks is Awesome! etiqueta de texto, pero esta función de renderizado crecerá y se volverá más compleja lo suficientemente pronto.

Finalmente, antes de que podamos ejecutar la aplicación nuevamente, necesitamos registrar GeeksForGeeks con el AppRegistry que importamos anteriormente porque generalmente solo necesita registrar su componente raíz.

AppRegistry.registerComponent('GeeksForGeeks', () => GeeksForGeeks);

Ahora, en los archivos index.android.js e index.ios.js, simplemente podemos necesitar importar el código fuente de GeeksForGeeks:

import GeeksForGeeks from './src/GeeksForGeeks';

Ahora use la herramienta de desarrollo especial incorporada. Agite el dispositivo y verá la opción de recargar. Haga clic en recargar y vea la magia.

Deberías poder ver lo mismo ¡GeeksForGeeks es increíble! mensaje impreso en su dispositivo. Sin compilar todo el proyecto.
En este punto, tenemos una configuración limpia del proyecto React Native y estamos listos para comenzar a agregar algunas funciones reales a la aplicación. Siga GeeksForGeeks para el próximo tutorial donde podremos jugar con react native y crear algunas aplicaciones geniales como la aplicación Calculadora, etc.

¿Cómo funciona React Native?

Escriba comentarios si encuentra algo incorrecto o si desea compartir más información sobre el tema discutido anteriormente.

Deja una respuesta

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