¿Cómo agregar un menú en react-native usando Material Design?

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, veremos cómo crear un menú en react-native. Para crear un menú, utilizaremos la biblioteca de diseño de materiales, es decir, react-native-paper. El menú contiene una lista de opciones que aparecen temporalmente. En nuestro proyecto, crearemos un botón y al hacer clic en ese botón, aparecerá el menú. vamos a la implementación 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 Menu.js

Estructura del proyecto: Se verá así.

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

En Menu.js, hemos importado el elemento del menú directamente desde la biblioteca de papel nativo . Utiliza los siguientes accesorios:

• visible: Se requiere apoyo para mostrar u ocultar el menú.
• ancla: Para abrir el menú, se requiere ancla. Puede ser un botón, texto, etiqueta, imagen, etc.
• onDismiss: es una función de devolución de llamada que se llama cuando se cierra el menú. El accesorio visible debe actualizarse cuando se llama.

import React, { useState } from 'react';
import { View, StyleSheet, Alert } from 'react-native';
import { Button, Menu, Provider } from 'react-native-paper';
  
const MenuExample = () => {
  const [visible, setVisible] = useState(false);
  
  const closeMenu = () => setVisible(false);
  const openMenu = (v) => setVisible(true);
  return (
    <Provider>
      <View style={styles.container}>
        <Menu
          visible={visible}
          onDismiss={closeMenu}
          anchor={
            <Button onPress={openMenu} mode="outlined">
              Show menu
            </Button>
          }>
          <Menu.Item
            onPress={() => {
              Alert.alert('Action : ', 'Print');
            }}
            title="Print"
          />
          <Menu.Item
            onPress={() => {
              Alert.alert('Action : ', 'Forward');
            }}
            title="Forward"
          />
          <Menu.Item
            onPress={() => {
              Alert.alert('Action : ', 'Backward');
            }}
            title="Backward"
          />
          <Menu.Item
            onPress={() => {
              Alert.alert('Action :', 'Save');
            }}
            title="Save"
          />
        </Menu>
      </View>
    </Provider>
  );
};
  
export default MenuExample;
  
const styles = StyleSheet.create({
  container: {
    padding: 50,
    flexDirection: 'row',
    justifyContent: 'center',
    height: 200,
  },
});

import React from 'react';
import type { Node } from 'react';
import { View } from 'react-native';
  
import MenuExample from './components/Menu';
  
const App: () => Node = () => {
  return (
    <View>
      <MenuExample />
    </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: