Botón de icono en React Native

Los iconos son el elemento más importante de la interacción del usuario. No solo hace que la aplicación sea atractiva, sino que también la hace más fácil de usar.

También ayuda a una mejor experiencia de usuario. Los botones con íconos son más interactivos que un botón que contiene solo texto.

Este artículo mostrará cómo podemos implementar un botón con íconos en una aplicación React-Native. Discutiremos el tema más profundamente usando ejemplos y explicaciones necesarios.

Implementar un Botón con Iconos en React Native

Nuestro ejemplo a continuación ilustra cómo podemos crear un botón de icono básico en la aplicación React-Native. Nuestro código será el siguiente:

// Importing necessary packages
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Button, Image, Text, View, Alert} from 'react-native';
import { IconButton, Colors } from 'react-native-paper';

// Our main function
export default function App() {
  return (  // Creating a button with a simple action
    <View style={styles.container}>
      <IconButton
         icon="login"
         size={25}
         onPress={() => Alert.alert('Button clicked !!!')}
      />

    </View>
  );

}

// Providing some style to our simple app.
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    margin: 50,
  },
});

Ya ordenamos el propósito de todas las líneas necesarias con respecto a los pasos compartidos anteriormente en el ejemplo.

El ejemplo anterior creó el botón de icono usando la etiqueta <IconButton />. En su interior, especificamos el nombre del icono icon="login", el tamaño del icono size={25} y una simple acción para el botón del icono onPress={() => Alert.alert('Botón pulsado!! !')}, y eso es.

Ahora, al ejecutar el código de ejemplo anterior, obtendrá el siguiente resultado en su pantalla.

Producción:

Recuerde que es posible que deba instalar el react-native-paper e importar el paquete a su proyecto React-Native.

Tenga en cuenta que el código de ejemplo compartido anteriormente se crea en React Native y usamos Expo-CLI para ejecutar la aplicación.