Introducción a React Native

Si desea crear aplicaciones móviles para Android e 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 es bastante diferente y puede ser costoso: 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, el la forma de hacer llamadas de red es diferente.

Siempre estamos buscando 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.

React Native: 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 compatibilidad reciente con el sistema operativo Android, la biblioteca ahora puede generar interfaces de usuario móviles para ambas plataformas.

Requisito previo:

• Conocimientos básicos de HTML , CSS y JS .
• Conocimientos básicos de ReactJS .
• NodeJs debe estar instalado en su sistema.

Construir con React Native es extremadamente eficiente y altamente adictivo, pero comenzar puede ser un poco complicado. React Native usa 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!

Instalación: aquí usaremos la versión Expo CLI que será mucho más fluida para ejecutar sus aplicaciones React Native. Siga los pasos a continuación uno por uno para configurar su entorno nativo de React.

• Paso 1: abre tu terminal y ejecuta el siguiente comando.

  npm install -g expo-cli

• Paso 2: ahora expo-cli está instalado globalmente para que pueda 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"
  npm start web

Estructura del proyecto:

Ejemplo:

import  React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
  
const Home=()=>{
  return (
      <Text style={{
                    marginTop:300,
                    marginLeft:10}}>
          Geeksforgeeks
      </Text>
  )
}
  
  
export default function App() {
  return (
    <View>
          <Home/>
    </View>
  );
}

Producción:

Ventajas sobre otros marcos e idiomas: cada vez que hay una actualización para aplicaciones escritas en Swift/Objective-C o Java, se debe volver a compilar toda la aplicación y se debe distribuir una nueva versión a la App Store nuevamente. Todo esto puede demorar algunas semanas dependiendo del proceso de revisión de la App Store.

Para evitar esta molestia, las aplicaciones React Native funcionan de manera diferente, una aplicación nativa puede ubicar un 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.

¿ Saber cómo funciona React Native? Puedes visitar este artículo.