¿Cómo importar componentes en React Native?

React Native es un marco desarrollado por Facebook para crear aplicaciones de estilo nativo para Android e iOS bajo un lenguaje común, es decir, 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.

Componente: Básicamente, sabemos que las aplicaciones React son una colección de componentes interactivos, con React Native, puede crear componentes utilizando clases o funciones. Originalmente, los componentes de clase eran los únicos componentes que podían tener estado. Pero desde la introducción de React Hooks API, puede agregar estado y más a los componentes de funciones. Los componentes son los bloques de construcción en React Native, que es similar al contenedor donde se recopilan todos los elementos de la interfaz de usuario y ayudan a representar los detalles en primer plano como una interfaz de usuario nativa en dispositivos Android o iOS. React viene con múltiples componentes integrados como Texto, Vista, Imagen, ScrollView, TextInput, etc.

Importación de componentes: el mundo de JavaScript siempre está en movimiento y uno de los últimos ECMAScript ahora proporciona un patrón de importación de módulos más avanzado. En la versión anterior, el desarrollador tenía que usar module.exports = { // Define tus exportaciones aquí. } , pero ahora cada módulo puede tener una exportación predeterminada o puede exportar ninguno de los parámetros nombrados, y si es posible exportar, seguramente será posible importar lo mismo. Por lo tanto, con la versión reciente de ECMAScript, cada módulo puede importar la exportación predeterminada o varios parámetros con nombre o incluso una combinación válida.

Enfoque: React Native usa las mismas características que se mencionaron anteriormente, y puede tratar cada componente de React como un módulo en sí mismo. Por lo tanto, es posible importar React Native Components y es una de las operaciones básicas a realizar. En React usamos la palabra clave import y from para importar un módulo en particular o un parámetro con nombre. Veamos las diferentes formas en que podemos usar la operación de importación en la aplicación React Native.

1. Importación de la exportación predeterminada : cada módulo en Reacts Native necesita al menos una exportación predeterminada. Para importar la exportación predeterminada desde un archivo, podemos usar la ubicación del archivo y usar la palabra clave import antes, o podemos darle un nombre específico, por ejemplo, COMP_NAME a la importación, lo que hace que la sintaxis sea la siguiente.

   import COMP_NAME from LOCATION

2. Importación de valores con nombre: cada módulo no puede tener parámetros con nombre y, en caso de que necesitemos importar uno, debemos usar la sintaxis de la siguiente manera.

   import { COMP_NAME } from LOCATION

   Y de manera similar, para importaciones múltiples, podemos usar un separador de coma ( , ) para separar los nombres de dos parámetros dentro de las llaves. Como se muestra abajo.

   import { COMP_NAME1, COMP_NAME2, ... , COMP_NAMEn } from LOCATION

3. Importación de una combinación de exportaciones predeterminadas y valores con nombre: el título deja claro que lo que debemos ver es la sintaxis de las mismas. Para importar una combinación, debemos usar la siguiente sintaxis. 

   import GIVEN_NAME, { PARA_NAME, ... } from ADDRESS

Ahora comencemos con la implementación: en primer lugar, debemos crear la aplicación nativa de reacción en nuestro sistema, para la creación de la aplicación nativa de reacción debemos seguir los pasos a continuación.

Requisito previo: Necesitamos instalar Node.js en nuestro sistema para ejecutar los comandos de Node Package Manager (npm).

• Instalación de Node.js en Windows
• Instalación de Node.js en Linux

• Paso 1: Instale la aplicación React Native.

  npm install -g create-react-native-app

• Paso 2: crear un proyecto nativo de React.

  create-react-native-app myReactNativeApp

• Paso 3: Inicie el servidor usando el siguiente comando.

  npm run android

Estructura del proyecto: los comandos anteriores crearán una myReactNativeApp llamada carpeta de aplicación nativa de reacción en la ubicación especificada de su sistema. Como se muestra abajo.

Ejemplo 1: En este ejemplo, estamos importando dos componentes básicos integrados Texto y Vista de React Native desde la biblioteca de react-native.

import * as React from "react";
  
// Importing components from react-native library.
import { View, Text } from "react-native";
  
export default function App() {
  return (
  
    // Using react-natives built in components.
    <View
      style={{
        flex: 0.5,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "green",
      }}
    >
      <Text
        style={{
          color: "white",
        }}>
        GeeksForGeeks
      </Text>
    </View>
  );
}

Paso para ejecutar la aplicación: Inicie el servidor usando el siguiente comando.

npm run android

Producción:

Ejemplo 2: en este ejemplo, crearemos un botón receptivo que muestra el componente de alerta, utilizando el componente de botón nativo reactivo. 

import * as React from "react";
  
// Importing components from react-native library.
import { Alert, View, StyleSheet, Button } from "react-native";
  
export default function App() {
  
  const onPressButton = () => {
    Alert.alert('Welcome To GeeksForGeeks..')
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 0.5,
      justifyContent: 'center',
      alignItems: 'center',
  
    }
  })
  
  return (
  
    // Using react-natives built in components.
    <View style={styles.container}>
  
      <Button onPress={onPressButton} 
              title="Press Me" color="green" />
  
    </View>
  );
}

Paso para ejecutar la aplicación: Inicie el servidor usando el siguiente comando.

npm run android

Producción: