Componente prensable nativo React

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 ).

En este artículo, vamos a ver cómo usar el componente Pressable de react-native. Pressable actúa como una envoltura para el componente en su interior. Pressable utiliza la API Pressability de React Native. 

En nuestro proyecto, envolveremos el texto y la imagen por separado con el componente Pressable para mostrar su funcionalidad. Veremos el enfoque paso a paso.

Creación de la aplicación React Native:

Paso 1: Cree un proyecto nativo de reacción:

npx react-native init DemoProject

Paso 2: Inicie el servidor usando el siguiente comando:

npx react-native run-android

Paso 3: Ahora ve a tu proyecto y crea una carpeta de componentes. Dentro de la carpeta de componentes, cree un archivo PressableComponent.js.

Estructura del proyecto: El proyecto debería verse así:

Projject Structure

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

Publicación traducida automáticamente

Artículo escrito por samiksharanjan 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 *