Generalidades

Cree botones personalizados reutilizables en React Native | Autor: Ugwuanyi Chidera | Agosto de 2021

React Native viene con un componente de botón predeterminado, puedes encontrarlo aquí. La gran desventaja de este botón es que no es muy personalizable. Por esta razón, si desea jugar muchas cosas, debe crear su propio componente de botón personalizado.

Usaremos React Native TouchableOpacity Componente para crear nuestro componente de botón personalizado. Este botón también aceptará accesorios.

Primero,

  • Cree un nuevo proyecto React Native;
  • Crear src Carpeta y agregue un component Carpeta en el interior.
  • Crea otra carpeta dentro component Carpeta y llámalo CustomButton.
  • en CustomButton,Agrega uno index.js documento.

Su estructura de archivo debería verse así

src 
|components
|CustomButton
|index.jsRender the CustomButton in your App’s index.js;

Agregue las siguientes líneas de código en el archivo index.js de CustomButton.

// CustomButton/index.js
import React from 'react';
import Text, StyleSheet from 'react-native';
const CustomButton = () =>
return (
<View style=styles.container>
<Text> hello button </Text>
</View>
);
;
export default CustomButton;const styles = StyleSheet.create(
container:
marginTop: 50,
,
);

Usaremos TouchableOpacity reemplazar View Los componentes del archivo,

..
import Text, TouchableOpacity StyleSheet from 'react-native';
...
<TouchableOpacity style=styles.container>
<Text> hello button </Text>
</TouchableOpacity>
...

ToneladaHelectrónico TouchableOpacity recibir View Prop más otro llamado onPress Acepta una función.

...
<TouchableOpacity style=styles.container onPress=() => console.log("Haha I'm about to be button")>
<Text> hello button </Text>
...

Con esto, presionamos en cualquier momento hello button Texto, veremos «Jaja, estoy a punto de ser un botón» en la consola, sigue intentándolo.

Comencemos a diseñar el estilo de este botón.

// Here I changed the text and added style prop
...
<Text style=styles.title> SEND </Text>

Este es un nuevo estilo

const styles = StyleSheet.create(
container:
marginTop: 50,
backgroundColor: '#512DA8',
height: 48,
alignItems: 'center',
justifyContent: 'center'
,
title:
color: "#fff",
fontSize: 16,

);

Por supuesto, puede agregar otros estilos como mejor le parezca.

Actualmente, nuestro botón es estático, hagámoslo dinámico y reutilizable.Es decir, si queremos cambiar el título de SEND llegar CONTINUE, ¿Qué pasa con el color del botón, qué pasa si queremos que el botón haga otras cosas cuando se presiona, etc.

Para lograr esto, haremos que el botón acepte algunos accesorios.

  • título: Cambia el título del botón.Necesita un string tipo de datos.
  • Reporte: Pasa cualquier función seleccionada. Necesita una función.
  • Color del boton: Cambia el color del botón.Necesita un string tipo de datos.
  • Color del título: Cambia el color del texto del título.Necesita un string tipo de datos.

Además, agregaremos accesorios de estilo general en caso de que queramos anular los estilos predeterminados de ambos title y TouchableOpacity Los llamaremos

  • Estilo de botón: Necesita un objeto de estilo.
  • Estilo de texto: Necesita un objeto de estilo.

Configura accesorios como este

...
const CustomButton = (
title,
onPress,
buttonColor,
titleColor,
buttonStyle,
textStyle,
) => {
return (
...

Y luego ponlos en su lugar

por título y Reporte pilar

<TouchableOpacity
style=styles.container
// Here
onPress=onPress
>
//Here too
<Text style=styles.title> title </Text>
...

Entonces, para TouchableOpacity Tenemos

...
<TouchableOpacity
// This here
style= '#512DA8'
onPress=onPress
>
...

Y para Text Tenemos

//This here too
...
<Text style=...styles.title, ...textStyle, color: titleColor > title </Text>
...

Preste atención a cómo usamos javascript Operador de propagación Para adaptarnos a múltiples estilos, también hemos agregado colores de fondo y colores de texto predeterminados para botones y texto respectivamente. Servirán como copias de seguridad.

Este es el código actual

import React from 'react';
import Text, TouchableOpacity, StyleSheet from 'react-native';
const CustomButton = (
title,
onPress,
buttonColor,
titleColor,
buttonStyle,
textStyle,
) =>
return (
<TouchableOpacity
style= '#512DA8',

onPress=onPress>
<Text
style= '#fff'>
title
</Text>
</TouchableOpacity>
);
;
export default CustomButton;const styles = StyleSheet.create(
container:
marginTop: 50,
backgroundColor: '#512DA8',
height: 48,
alignItems: 'center',
justifyContent: 'center',
,
title:
color: '#fff',
fontSize: 16,
,
);

Para aprovechar estos accesorios, abra App.js o cualquier renderizado CustomButton Componente y agregue lo siguiente:

...
<>
<CustomButton
buttonColor="#536DFE"
title="SEND"
buttonStyle=width: '90%', alignSelf: 'center'
textStyle=fontSize: 20
onPress=() => console.log('I am the first button')
/>
<CustomButton
buttonColor="#4DB6AC"
titleColor="#000"
title="DONE"
buttonStyle=width: '80%', alignSelf: 'center'
textStyle=fontSize: 20
onPress=() => console.log('I am the second button')
/>
<CustomButton
buttonColor="#9C27B0"
titleColor="#FFF"
title="DONE"
buttonStyle=width: '60%', alignSelf: 'center'
textStyle=fontSize: 20
onPress=() => console.log('I am the third button')
/>
<CustomButton
buttonColor="transparent"
titleColor="#000"
title="CANCEL"
buttonStyle=
width: '40%',
alignSelf: 'center',
borderWidth: 1,
borderColor: '#1c1c1c',
borderRadius: 6,

textStyle=fontSize: 20
onPress=() => console.log('I am the fourth button')
/>
</>
...

Obtendremos

Eso es todo, ha creado con éxito un botón personalizado reutilizable en React Native.

Si te ha gustado este artículo, dale me gusta, compártelo y añade tu comentario.

Tu tambien puedes seguirme Gorjeo

LEER  Stickman Legend: Shadow Fighting Juego de Swordplay sin conexión-Apkappstore

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba