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 chip en React Native utilizando la biblioteca React-Native-Paper. Los chips se utilizan para mostrar mini entidades en forma de bloque. En este proyecto, crearemos diferentes chips, que pueden mostrar texto simple, íconos con texto, deshabilitar el chip, etc.
A continuación se muestra la implementación paso a paso:
Paso 1: Cree un proyecto nativo de reacción 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: Inicie el servidor usando lo siguiente:
npx react-native run-android
Paso 4: Instalar las dependencias para íconos y enlaces profundos:
npm i react-native-vector-icons react-native link react-native-vector-icons
Paso 5: Ahora ve a tu proyecto y crea una carpeta de componentes. Dentro de la carpeta de componentes, cree un archivo Chip.js.
Estructura del proyecto: Se verá así.
Ejemplo: Anote el código en los archivos respectivos. El chip es similar al botón en términos de funcionalidad. Podemos importar Chip directamente desde la biblioteca de papel nativo reactivo . Tiene accesorios de modo . Para mostrar el ícono, podemos usar el ícono prop.
Chip.js
import React from 'react'; import { View, StyleSheet, Alert } from 'react-native'; import { Chip } from 'react-native-paper'; const ChipExample = () => { return ( <View> <View style={styles.chip}> <Chip icon="information" mode="flat" onPress={() => Alert.alert('Information chip pressed')}> Information </Chip> </View> <View style={styles.chip}> <Chip icon="forward" mode="outlined"> Forward{' '} </Chip> </View> <View style={styles.chip}> <Chip icon="heart" mode="outlined" selectedColor="red"> Favourites </Chip> </View> <View style={styles.chip}> <Chip disabled>Simple(disabled)</Chip> </View> </View> ); }; export default ChipExample; const styles = StyleSheet.create({ chip: { width: 120, marginLeft: 20, marginTop: 20, marginBottom: 10, }, });
Nombre de archivo: App.js
Javascript
import React from 'react'; import type { Node } from 'react'; import { View } from 'react-native'; import ChipExample from './components/chip'; const App: () => Node = () => { return ( <View> <ChipExample /> </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:
Referencias: https://callstack.github.io/react-native-paper/chip.html
Publicación traducida automáticamente
Artículo escrito por samiksharanjan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA