Hay un problema con los botones nativos de reacción que pueden ser difíciles de ver y entender. Cuando crea un botón en React Native, tiene la opción de crear un botón redondo o cuadrado. Sin embargo, cuando usa estos botones en su aplicación, puede ser difícil ver cuál es redondo y cuál es cuadrado. Esto puede generar confusión y problemas cuando intenta usar los botones en su aplicación.
border
import React, { Component } from 'react'; import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.container}> <TouchableOpacity style={styles.button}> <Text style={styles.text}>Click Me</Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, button: { backgroundColor:'#4ba37b', width:100, borderRadius:50, alignItems:'center', paddingTop:14 }, text:{ color:'#fff', fontSize:16 } });
Este código está escrito en React Native y crea un botón que dice "Click Me". Cuando se hace clic en el botón, se realiza una acción.
La primera línea importa las bibliotecas React y React Native.
La segunda línea crea un componente llamado App. Este componente representará un botón.
La tercera línea representa el componente de la aplicación. El componente de la aplicación contiene un elemento TouchableOpacity, que se representará como un botón. El botón tiene un estilo de styles.button, que se define en la cuarta línea. El texto del botón tendrá un estilo de estilos.texto, que se define en la quinta línea.
Las líneas sexta y séptima definen los estilos de los elementos contenedor y botón, respectivamente. El elemento contenedor tendrá el valor dejustificarContenido y alinearItems establecidos en 'centrar', de modo que el botón estará centrado en la pantalla. El elemento del botón tendrá un color de fondo de '#4ba37b' y un ancho de 100 píxeles. También tendrá borderRadius establecido en 50, de modo que aparezca como un círculo en lugar de un rectángulo. Finalmente, tendrá alignItems configurados en 'centrar', de modo que el texto dentro de él esté centrado vertical y horizontalmente.
establecer botones en React
Hay algunos tipos diferentes de botones en React Native:
Botón
Entrada de texto
Radiobutton
Casilla de verificación
Cómo dar estilos a los botones
Hay algunas formas de dar estilos a los botones en React Native.
Una forma es usar el componente StyleSheet. Puede pasar un objeto de estilo como segundo argumento al método create() del componente StyleSheet. El objeto de estilo puede contener propiedades de fuente, color y color de fondo.
Otra forma es usar el componente Botón. Puede pasar un objeto de estilo como segundo argumento al método create() del componente Button. El objeto de estilo puede contener propiedades de fuente, color y color de fondo.
