Introduzione a Button in React Native
Come sappiamo, i pulsanti sono elementi chiave di un'interfaccia utente che funzionano dopo averli premuti. Pertanto è necessario imparare come vengono creati i pulsanti in reattivo nativo. In questo articolo vedremo come vengono creati i pulsanti in reattivo nativo, la loro sintassi e i diversi tipi di pulsanti disponibili in reattivo nativo. Inoltre, vedremo alcuni esempi che mostrano l'uso dei pulsanti nelle applicazioni di reazione.
Sintassi:
import React, ( Component ) from 'react'
import ( Button ) from 'react-native'
const Test = () => (
return (
< Button
//define the properties of button
/>
)
)
export default Test
La sintassi sopra mostra come viene usato un pulsante in reattivo nativo. Implica la definizione di un tag XML con un elemento pulsante, ora in base alle nostre esigenze è possibile definire proprietà diverse per un pulsante. Ecco l'elenco delle proprietà con il loro tipo e descrizione.
| Nome della proprietà | genere | Uso |
| onPress | funzione | Questa è una proprietà richiesta e richiede di specificare la funzione che verrà eseguita quando si fa clic su questo pulsante. |
| Titolo | Corda | Questo è il testo che verrebbe visualizzato come un'etichetta sul pulsante e questa è una proprietà richiesta. |
| Colore | Colore | È una proprietà opzionale richiesta per impostare il colore di sfondo del pulsante. |
| Disabilitato | booleano | Viene utilizzato per disabilitare gli eventi tocco di un pulsante. |
| TextID | Corda | È una proprietà opzionale richiesta per identificare un pulsante in modo univoco. |
| Etichetta di accessibilità | Corda | Utilizzato per visualizzare il testo per le funzionalità di accessibilità della cecità a un pulsante. |
Tipi di pulsanti in React Native
I pulsanti in React possono essere classificati nei seguenti tipi:
1. Tipi di base: rientrano nella categoria di base e possono essere dei seguenti tipi:
- Pulsante: utilizzato per definire i pulsanti di clic.
- Invia: questo tipo di pulsante viene utilizzato insieme a un modulo per inviare i dettagli.
- Ripristina: utilizzato per cancellare il contenuto del campo con un clic.
2. Pulsante piatto: ha uno stile senza colore di sfondo. Per creare un pulsante flat in reagire, imposta la classe CSS su e-flat.
3. Pulsante Contorno: questo tipo di pulsante contiene un bordo con uno sfondo trasparente. Per creare questo tipo di pulsante, imposta la classe CSS come contorno elettronico.
4. Pulsante tondo: questo pulsante ha una forma circolare. Per creare un pulsante rotondo, impostare la classe CSS su e-round.
5. Pulsante Toggle: il pulsante Toggle è un pulsante il cui stato può essere modificato. Consideriamo un esempio di un pulsante Riproduci e Pausa. Al clic su questo pulsante, il suo stato viene modificato e dopo un altro clic, riacquista il suo stato. Questa funzione di cambio di stato è raggiunta dall'evento clic del pulsante. Per creare un interruttore dobbiamo impostare la proprietà isToggle su true.
Esempi di Button in React Native
Di seguito sono riportati gli esempi di Button in React Native:
Esempio 1
Per iniziare, consente di progettare un semplice pulsante per mostrare come viene gestito il suo evento click.
Codice:
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")
));
Produzione:
Facendo clic sul pulsante sopra verrà generato un avviso che mostra il popup con testo.
Produzione:
Questo avviso viene generato a causa dell'evento onPress attivato che chiama il metodo onPressButton che contiene la logica di visualizzazione dell'avviso. Quindi l'esempio sopra mostra come viene creato un pulsante in reattivo nativo e come viene gestito il suo evento click.
Esempio n. 2
In questo esempio, vediamo come possiamo modificare l'opacità di un pulsante in reatt. A tale scopo, utilizzeremo un tag TouchableOpacity che conterrà un tag pulsante al suo interno.
Codice:
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'
)
))
Produzione:
Dopo aver premuto questo pulsante vedremo la seguente modifica.
Produzione:
Conclusione
Dalla discussione di cui sopra, abbiamo una chiara comprensione di come possiamo creare pulsanti per reagire. Siamo in grado di fornire diversi stili e personalizzazioni per offrire una migliore esperienza utente. Il componente Button offre animazioni integrate e il loro evento click può essere gestito con il metodo onPress.
Articolo raccomandato
Questa è una guida a Button in React Native. Qui discutiamo un'introduzione al pulsante in React Native e ai suoi tipi insieme all'implementazione del codice. Puoi anche consultare i nostri altri articoli suggeriti per saperne di più -
- React Native vs React - Principali differenze
- Le 19 principali domande di intervista a ReactJs
- Metodi del pulsante JavaFX
- Primi 10 usi di React JS