Introducere în butonul în React Native
După cum știm că butoanele sunt elemente cheie ale unei interfețe de utilizator care funcționează după apăsarea lor. Prin urmare, este necesar să aflați cum sunt create butoanele în reacția nativă. În acest articol vom vedea cum sunt create butoanele în reacție nativă, sintaxa lor și diferitele tipuri de butoane disponibile în reacție nativă. De asemenea, vom vedea câteva exemple care arată utilizarea butoanelor în aplicațiile de reacție.
Sintaxă:
import React, ( Component ) from 'react'
import ( Button ) from 'react-native'
const Test = () => (
return (
< Button
//define the properties of button
/>
)
)
export default Test
Sintaxa de mai sus arată cum este utilizat un buton în reacția nativă. Aceasta implică definirea unei etichete XML cu un element buton, acum în funcție de cerința noastră se pot defini diferite proprietăți pentru un buton. Iată lista proprietăților cu tipul și descrierea acestora.
| Numele proprietatii | Tip | Utilizare |
| onPress | funcţie | Aceasta este o proprietate obligatorie și necesită specificarea funcției care va fi executată la apăsarea acestui buton. |
| Titlu | Şir | Acesta este textul care va fi afișat ca o etichetă pe buton și aceasta este o proprietate obligatorie. |
| Culoare | Culoare | Este o proprietate opțională necesară pentru a seta culoarea de fundal a butonului. |
| Dezactivat | boolean | Este folosit pentru a dezactiva evenimentele tactile ale unui buton. |
| textID | Şir | Este o proprietate opțională necesară pentru a identifica un buton în mod unic. |
| Eticheta de accesibilitate | Şir | Folosit pentru a afișa textul pentru capacitățile de accesibilitate la orbire la un buton. |
Tipuri de buton în React Native
Butoanele din React pot fi clasificate în următoarele tipuri:
1. Tipuri de bază: Acestea se încadrează în categoria de bază și pot fi de următoarele tipuri:
- Buton: Acesta este utilizat pentru definirea butoanelor de clic.
- Trimitere: Acest tip de buton este utilizat împreună cu un formular pentru a trimite detalii.
- Resetare: folosit pentru a șterge conținutul câmpului pe un clic.
2. Buton plat: Acesta are un stil fără culoare de fundal. Pentru a crea un buton plat în reacție, setați clasa CSS pe e-flat.
3. Buton contur: Acest tip de buton conține o bordură cu un fundal transparent. Pentru a crea acest tip de buton, setați clasa CSS ca contur electronic.
4. Buton rotund: Acest buton are o formă circulară. Pentru a crea un buton rotund, setați clasa CSS la e-round.
5. Butonul Toggle: butonul Toggle este un buton a cărui stare poate fi modificată. Să luăm în considerare un exemplu de buton de redare și pauză. Pe un clic al acestui buton, starea lui este schimbată și după un alt clic, își recapătă starea. Această funcție de modificare a stării este realizată prin clic pe evenimentul butonului. Pentru a crea o comutare trebuie să setăm proprietatea isToggle la true.
Exemple de buton în React Native
Mai jos sunt exemple de buton în React Native:
Exemplul # 1
Pentru a începe lucrurile, proiectăm un buton simplu, arată modul în care este gestionat evenimentul de clic.
Cod:
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")
));
ieşire:
Făcând clic pe butonul de mai sus va fi generată o alertă care va afișa fereastra cu text.
ieşire:
Această alertă este generată din cauza evenimentului onPress este declanșat, care apelează la metoda PressButton care conține logica afișării alertei. Prin urmare, exemplul de mai sus arată cum este creat un buton în reacția nativă și cum este gestionat evenimentul de clic.
Exemplul # 2
În acest exemplu, vedem cum putem schimba opacitatea unui buton în reacție. În acest scop, vom folosi o etichetă TouchableOpacity care va conține o etichetă buton în ea.
Cod:
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'
)
))
ieşire:
După apăsarea acestui buton, vom vedea schimbarea de mai jos.
ieşire:
Concluzie
Din discuția de mai sus, avem o înțelegere clară a modului în care putem crea butoane pentru a reacționa. Putem oferi diferite stiluri și personalizări pentru a oferi o experiență de utilizator mai bună. Componenta butonului se oferă pentru a crea animații, iar evenimentul lor de clic poate fi gestionat folosind metoda onPress.
Articol recomandat
Acesta este un ghid pentru butonul din React Native. Aici vom discuta despre o introducere a butonului în React Native și tipurile sale împreună cu implementarea codului. Puteți parcurge și alte articole sugerate pentru a afla mai multe -
- Reaction Native vs React - Top Differences
- Top 19 întrebări pentru interviu ReactJs
- Metode de buton JavaFX
- Top 10 Utilizări ale React JS