¿Cómo crear un Banner en react-native?

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.

requisitos previos:

• Conocimientos básicos de reactjs .
• Html, css y javascript con sintaxis ES6.
• NodeJs debe estar instalado en su sistema ( install ).
• Jdk y Android Studio para probar su aplicación en el emulador ( instalar ).

Enfoque: en este artículo, crearemos un banner en React Native utilizando Material Design. Usaremos la biblioteca react-native-paper para crearlo. El banner se utiliza para mostrar un mensaje importante y las acciones correspondientes.

En nuestro proyecto, mostraremos campos de entrada para capturar datos de usuario y un botón. Al hacer clic en ese botón, aparecerá el banner en la parte superior de la pantalla con acciones relacionadas. Veremos el enfoque paso a paso.

A continuación se muestra la implementación paso a paso:

Paso 1: Cree un proyecto en react-native usando el siguiente comando:

npx react-native init DemoProject

Paso 2: instale el papel nativo reactivo con el siguiente comando:

npm install react-native-paper

Paso 3: Cree una carpeta de componentes dentro de su proyecto. Dentro de la carpeta de componentes crea un archivo Banner.js

Estructura del proyecto: se verá así

Paso 4: en Banner.js, hemos importado el componente Banner del papel reactivo nativo. Usaremos ganchos useState y useEffect para actualizar el estado de los componentes.

Un Banner utiliza los siguientes accesorios:

• visible: Puede ser verdadero o falso. Es un accesorio obligatorio que se encarga de mostrar u ocultar el componente Banner.
• acciones: Elementos de acción para mostrar en el banner. Un elemento de acción debe contener las siguientes propiedades:
  • etiqueta: etiqueta del botón de acción (obligatorio)
  • onPress: devolución de llamada que se llama cuando se presiona el botón (requerido)

Implementación: Anote el código en los archivos respectivos.

import React, { useState } from "react";
import { View, StyleSheet, Alert } from "react-native";
import { Banner, Button, TextInput } from "react-native-paper";
  
const BannerComponent = () => {
    const [visible, setVisible] = useState(false);
    const [Email, setEmail] = useState("");
    const [phone, setPhone] = useState("");
  
    return (
        <View>
            <Banner
                visible={visible}
                actions={[
                    { label: "Modify", onPress: () => setVisible(false) },
                    {
                        label: "Proceed",
                        onPress: () => {
                            setVisible(false);
                            setEmail("");
                            setPhone("");
                            Alert.alert("Thanks for your Confirmation");
                        },
                    },
                ]}
            >
                Your details has been captured. It will select in an hour.
            </Banner>
  
            <TextInput
                style={styles.input}
                label="Email id"
                value={Email}
                onChangeText={(text) => setEmail(text)}
            />
  
            <TextInput
                style={styles.input}
                label="Phone"
                value={phone}
                onChangeText={(text) => setPhone(text)}
            />
  
            <Button onPress={() => setVisible(true)}>Submit</Button>
        </View>
    );
};
  
export default BannerComponent;
  
const styles = StyleSheet.create({
    input: {
        margin: 20,
    },
});

import React from "react";
import type { Node } from "react";
import { View } from "react-native";
import BannerComponent from "./components/Banner";
  
const App: () => Node = () => {
    return (
        <View>
            <BannerComponent />
        </View>
    );
};
  
export default App;

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando:

npx react-native run-android

Producción: