¿Cómo crear tostadas 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, macOS, tvOS, Web, Windows y UWP al permitir que los desarrolladores usen el marco React junto con con capacidades de plataforma nativa.

En este artículo, aprenderemos cómo crear un brindis en React Native.

Creación de la aplicación React Native:

Paso 1: usaremos expo para crear la aplicación nativa de reacción. Instale expo-cli usando el siguiente comando en la terminal.

npm install -g expo-cli

Paso 2: Cree un proyecto nativo de reacción usando expo.

expo init "gfg"

Paso 3: Ahora ve al proyecto creado usando el siguiente comando.

cd "gfg"

Estructura del proyecto: Tendrá el siguiente aspecto.

Agregar el brindis: podemos agregar fácilmente brindis en nuestra aplicación nativa de reacción. Para ello vamos a utilizar la API ToastAndroid de react-native. 

Ejemplo:  agregue el siguiente código en el archivo App.js.

Javascript

import React from "react";
import { ToastAndroid,Button, View, Text } from "react-native";
  
const GfGApp = () => {
  
  const GfGToast = () => {
    ToastAndroid.showWithGravity(
      "This is the demo text!!!!!!! ",
      ToastAndroid.SHORT,
      ToastAndroid.BOTTOM
    );
  };
    
  return (
    <View style={{ marginTop: 200 }}>
      <Text style={{fontSize:18}}>
          GeeksforGeeks React Native Toast
      </Text>
      <Button
        title="Toggle Toast "
        onPress={() => GfGToast()}
      />
    </View>
  );
};
  
  
  
export default GfGApp;

Aquí primero estamos creando nuestro brindis usando la función ToastAndroid.showWithGravity. Luego estamos alternando el brindis cada vez que el usuario presiona el botón.

Paso para ejecutar la aplicación: Ahora ejecute la aplicación usando el siguiente comando en la terminal.

npm run web

Producción:

Publicación traducida automáticamente

Artículo escrito por imranalam21510 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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