Introducción al botón en React Native
Como sabemos, los botones son elementos clave de una interfaz de usuario que funcionan después de presionarlos. Por lo tanto, es necesario aprender cómo se crean los botones en reaccionar nativo. En este artículo veremos cómo se crean los botones en react native, su sintaxis y los diferentes tipos de botones disponibles en react native. Además, veremos algunos ejemplos que muestran el uso de botones en aplicaciones de reacción.
Sintaxis:
import React, ( Component ) from 'react'
import ( Button ) from 'react-native'
const Test = () => (
return (
< Button
//define the properties of button
/>
)
)
export default Test
La sintaxis anterior muestra cómo se usa un botón en react native. Implica definir una etiqueta XML con un elemento de botón, ahora de acuerdo con nuestros requisitos se pueden definir diferentes propiedades para un botón. Aquí está la lista de propiedades con su tipo y descripción.
| Nombre de la propiedad | Tipo | Utilizar |
| onPress | función | Esta es una propiedad requerida y requiere especificar la función que se ejecutará cuando se haga clic en este botón. |
| Título | Cuerda | Este es el texto que se mostrará como una etiqueta en el botón y esta es una propiedad obligatoria. |
| Color | Color | Es una propiedad opcional requerida para establecer el color de fondo del botón. |
| Discapacitado | booleano | Se utiliza para deshabilitar los eventos táctiles de un botón. |
| textID | Cuerda | Es una propiedad opcional requerida para identificar un botón de forma exclusiva. |
| Etiqueta de accesibilidad | Cuerda | Se usa para mostrar texto para las capacidades de accesibilidad de ceguera a un botón. |
Tipos de botones en React Native
Los botones en React se pueden clasificar en los siguientes tipos:
1. Tipos básicos: se incluyen en la categoría básica y pueden ser de los siguientes tipos:
- Botón: se utiliza para definir botones de clic.
- Enviar: Este tipo de botón se usa junto con un formulario para enviar detalles.
- Restablecer: se utiliza para borrar el contenido del campo al hacer clic.
2. Botón plano: tiene un estilo sin color de fondo. Para crear un botón plano en react, configure la clase CSS en e-flat.
3. Botón de esquema: este tipo de botón contiene un borde con un fondo transparente. Para crear este tipo de botón, establezca la clase CSS como un esquema electrónico.
4. Botón redondo: este botón tiene forma circular. Para crear un botón redondo, establezca la clase CSS en e-round.
5. Botón de alternar: El botón de alternar es un botón cuyo estado se puede cambiar. Consideremos un ejemplo de un botón de reproducción y pausa. Al hacer clic en este botón, su estado cambia y después de otro clic, recupera su estado. Esta función de cambio de estado se logra haciendo clic en el evento del botón. Para crear una alternancia necesitamos establecer la propiedad isToggle en true.
Ejemplos de botones en React Native
A continuación se muestran los ejemplos de Button en React Native:
Ejemplo 1
Para comenzar, diseñemos un botón simple que muestre cómo se maneja su evento de clic.
Código:
import ( AppRegistry ) from "react-native";
import React, ( Component ) from 'react';
import ( Alert, Button, StyleSheet, View ) from 'react-native';
export default class ButtonDemo extends Component (
onPressButton() (
Alert.alert ('Hello Welcome to Edubca!')
)
render() (
return (
onPress=(this.onPressButton)
title="Click Me"
color="#000000"
/>
);
)
)
const styles = StyleSheet.create((
container: (
flex: 1,
justifyContent: 'center',
),
buttonContainer: (
margin: 20
),
multiButtonContainer: (
margin: 20,
flexDirection: 'row',
justifyContent: 'space-between'
)
))
AppRegistry.registerComponent("App", () => ButtonDemo);
AppRegistry.runApplication("App", (
rootTag: document.getElementById("root")
));import ( AppRegistry ) from "react-native";
import React, ( Component ) from 'react';
import ( Alert, Button, StyleSheet, View ) from 'react-native';
export default class ButtonDemo extends Component (
onPressButton() (
Alert.alert ('Hello Welcome to Edubca!')
)
render() (
return (
onPress=(this.onPressButton)
title="Click Me"
color="#000000"
/>
);
)
)
const styles = StyleSheet.create((
container: (
flex: 1,
justifyContent: 'center',
),
buttonContainer: (
margin: 20
),
multiButtonContainer: (
margin: 20,
flexDirection: 'row',
justifyContent: 'space-between'
)
))
AppRegistry.registerComponent("App", () => ButtonDemo);
AppRegistry.runApplication("App", (
rootTag: document.getElementById("root")
));
Salida:
Al hacer clic en el botón anterior, se generará una alerta que muestra la ventana emergente con texto.
Salida:
Esta alerta se genera debido a que se activa el evento onPress que llama al método onPressButton que contiene la lógica de mostrar la alerta. Por lo tanto, el ejemplo anterior muestra cómo se crea un botón en react native y cómo se maneja su evento click.
Ejemplo # 2
En este ejemplo, vemos cómo podemos cambiar la opacidad de un botón en reaccionar. Para este propósito, usaremos una etiqueta TouchableOpacity que contendrá una etiqueta de botón.
Código:
Import React from 'react'
import ( TouchableOpacity, StyleSheet, View, Text ) from 'react-native'
const TestApp = () => (
return (
Button
)
)
export default TestApp
const styles = StyleSheet.create ((
container: (
alignItems: 'center',
),
text: (
borderWidth: 1,
padding: 25,
borderColor: 'black',
backgroundColor: 'blue'
)
))
Salida:
Después de presionar este botón, veremos el cambio a continuación.
Salida:
Conclusión
De la discusión anterior, tenemos una comprensión clara de cómo podemos crear botones para reaccionar. Podemos proporcionar diferentes estilos y personalizaciones para proporcionar una mejor experiencia de usuario. El componente de botón ofrece construir animaciones y su evento de clic se puede manejar usando el método onPress.
Artículo recomendado
Esta es una guía para Button en React Native. Aquí discutimos una Introducción al Botón en React Native y sus tipos junto con la Implementación de Código. También puede consultar nuestros otros artículos sugeridos para obtener más información:
- React Native vs React - Diferencias principales
- Las 19 preguntas principales de la entrevista de ReactJs
- Métodos del botón JavaFX
- Los 10 usos principales de React JS