Nupu sissejuhatus reaalajas
Nagu me teame, on nupud kasutajaliidese põhielemendid, mis töötavad pärast nende vajutamist. Seetõttu on vaja õppida, kuidas nuppe luuakse reaalajas. Selles artiklis näeme, kuidas nupud luuakse reageerivas natiivis, nende süntaks ja eri tüüpi nupud, mis on natiivis reageerimiseks saadaval. Samuti näeme mõnda näidet, mis näitab nuppude kasutamist reageerivates rakendustes.
Süntaks:
import React, ( Component ) from 'react'
import ( Button ) from 'react-native'
const Test = () => (
return (
< Button
//define the properties of button
/>
)
)
export default Test
Ülaltoodud süntaks näitab, kuidas nuppu reaalajas reageerimisel kasutatakse. See hõlmab XML-sildi määratlemist nupuelemendiga, nüüd saab vastavalt meie nõudele nupule määratleda erinevad omadused. Siin on atribuutide loetelu koos tüübi ja kirjeldusega.
| Kinnistu nimi | Tüüp | Kasutage |
| onPress | funktsiooni | See on nõutav omadus ja see nõuab funktsiooni täpsustamist, mida sellel nupul klõpsamisel täidetakse. |
| Pealkiri | Keel | See on tekst, mis kuvatakse nupul sildina ja see on nõutav omadus. |
| Värv | Värv | See on nupu taustavärvi seadmiseks vajalik valikuline omadus. |
| Keelatud | loogiline | Seda kasutatakse nupu puutetundlike sündmuste keelamiseks. |
| textID | Keel | See on valikuline omadus, mis on vajalik nupu ainulaadseks tuvastamiseks. |
| Juurdepääsetavuse silt | Keel | Kasutatakse pimeduse juurdepääsetavuse võimaldamiseks teksti kuvamiseks nupule. |
Nuppude tüübid reaalajas
Nuppe Reaktis saab liigitada järgmistesse tüüpidesse:
1. Põhitüübid: need kuuluvad põhikategooriasse ja võivad olla järgmist tüüpi:
- Nupp: seda kasutatakse klõpsunuppude määratlemiseks.
- Esita: seda tüüpi nuppu kasutatakse koos üksikasju esitava vormiga.
- Lähtestamine: kasutatakse välja sisu tühjendamiseks selle klõpsamisel.
2. Lame nupp: sellel taustal pole värvi. Lameda nupu loomiseks reageerimisel määrake CSS-i klass e-korteriks.
3. Kontuurnupp: seda tüüpi nupud sisaldavad läbipaistva taustaga äärist. Seda tüüpi nupu loomiseks määrake CSS-klass e-kontuuriks.
4. Ümar nupp: see nupp on ümmarguse kujuga. Ümmarguse nupu loomiseks seadke CSS-klass e-vooruks.
5. Nupp Toggle: Lülitusnupp on nupp, mille olekut saab muuta. Vaatleme näidet mängu- ja pausinupust. Selle nupu klõpsamisel muudetakse selle olekut ja pärast uut klõpsamist taastatakse olek. See oleku muutmise funktsioon saavutatakse nupuvajutusega. Lülituse loomiseks peame isToggle atribuudi väärtuseks true.
Näited nupust reaalajas
Allpool on näited nupust reaalajas:
Näide nr 1
Asjade alustamiseks võimaldab kujundus lihtsal nupul näidata, kuidas selle klõpsamissündmust käsitletakse.
Kood:
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")
));
Väljund:
Ülaltoodud nupul klõpsamisel luuakse märguanne, mis näitab hüpikteksti koos tekstiga.
Väljund:
See teade genereeritakse, kuna käivitatakse sündmus onPress, mis kutsub sisse onPressButtoni meetodi, mis sisaldab hoiatuse kuvamise loogikat. Seega näitab ülaltoodud näide, kuidas nupp luuakse reaalajas natiivi ja kuidas selle klõpsamissündmust käideldakse.
Näide 2
Selles näites näeme, kuidas saame reageerimisel nupu läbipaistmatust muuta. Sel eesmärgil kasutame silti TouchableOpacity, mis sisaldab nupusilti.
Kood:
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'
)
))
Väljund:
Pärast selle nupu vajutamist näeme allpool toodud muudatusi.
Väljund:
Järeldus
Ülaltoodud arutelu põhjal on meil selge arusaam, kuidas saaksime reageerimise nuppe luua. Parema kasutajakogemuse tagamiseks võime pakkuda erinevaid stiile ja kohandamisi. Nupukomponent pakub animatsioonide loomist ja nende klõpsamissündmust saab käsitleda onPress-meetodil.
Soovitatav artikkel
See on juhend nupule React Native. Siin käsitleme reaalajas nupu sissejuhatust nupule ja selle tüüpe koos koodi juurutamisega. Lisateavet leiate ka meie muudest soovitatud artiklitest -
- Reaktiivne natiivne vs reageeriv - peamised erinevused
- 19 parimat ReactJi intervjuuküsimust
- JavaFX-nupu meetodid
- React JS 10 parimat kasutusala