Introduksjon til knapp i reaksjon Native
Som vi vet at knapper er sentrale elementer i et brukergrensesnitt som fungerer etter å ha trykket på dem. Derfor er det nødvendig å lære hvordan knapper opprettes i react native. I denne artikkelen vil vi se hvordan knapper opprettes i react native, deres syntaks og forskjellige typer knapper tilgjengelig i react native. Vi vil også se noen eksempler som viser bruk av knapper i reaksjonsapplikasjoner.
syntaks:
import React, ( Component ) from 'react'
import ( Button ) from 'react-native'
const Test = () => (
return (
< Button
//define the properties of button
/>
)
)
export default Test
Syntaksen ovenfor viser hvordan en knapp brukes i reaktivt native. Det innebærer å definere en XML-kode med et knappelement, nå i henhold til vårt krav kan forskjellige egenskaper defineres for en knapp. Her er listen over egenskaper med deres type og beskrivelse.
| Eiendomsnavn | Type | Bruk |
| onPress | funksjon | Dette er en påkrevd egenskap, og den krever å spesifisere funksjonen som skal utføres når du klikker på denne knappen. |
| Tittel | string | Dette er teksten som vil vises som en etikett på knappen, og dette er en påkrevd egenskap. |
| Farge | Farge | Det er en valgfri egenskap som kreves for å stille inn bakgrunnsfargen på knappen. |
| Funksjonshemmet | boolean | Det brukes til å deaktivere berøringshendelser på en knapp. |
| TEXTID | string | Det er en valgfri egenskap som kreves for å identifisere en knapp på en unik måte. |
| Tilgjengelighetsetikett | string | Brukes til å vise tekst for tilgjengelighetsfunksjoner for blindhet på en knapp. |
Knappetyper i reaktivt innfødt
Knapper i reaksjon kan klassifiseres i følgende typer:
1. Grunntyper: Disse faller inn i grunnleggende kategori og kan være av følgende typer:
- Knapp: Dette brukes til å definere klikk knapper.
- Send: Denne typen knapper brukes sammen med et skjema for å sende inn detaljer.
- Reset: Brukes til å fjerne feltinnholdet ved å klikke på det.
2. Flat knapp: Dette har en stil uten bakgrunnsfarge. Hvis du vil lage en flat knapp i reaksjon, setter du CSS-klassen til e-flat.
3. Kontur knapp: Denne typen knapper inneholder en kant med en gjennomsiktig bakgrunn. For å lage denne typen knapper, angi CSS-klassen som en e-disposisjon.
4. Rund knapp: Denne knappen har en sirkulær form. For å lage en rund knapp setter du CSS-klasse til e-round.
5. Toggle-knapp: Toggle-knapp er en knapp hvis tilstand kan endres. La oss se på et eksempel på en avspillingsknapp. På Klikk på denne knappen endres tilstanden, og etter et nytt klikk gjenoppretter den tilstanden. Denne tilstandsendringsfunksjonen oppnås ved å klikke på knappen av hendelsen. For å lage en veksling må vi sette egenskapen Toggle til true.
Eksempler på knapp i React Native
Nedenfor er eksemplene på Button i React Native:
Eksempel 1
For å starte ting lar design av en enkel knapp vise hvordan klikkhendelsen blir håndtert.
Kode:
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")
));
Produksjon:
Når du klikker på knappen over, vil det bli generert et varsel som viser popupen med tekst.
Produksjon:
Dette varselet genereres på grunn av onPress-hendelse som blir utløst som kaller onPressButton-metoden som inneholder logikken for å vise varselet. Derfor viser eksemplet ovenfor hvordan en knapp opprettes i react native og hvordan klikkhendelsen håndteres.
Eksempel 2
I dette eksemplet ser vi hvordan vi kan endre opaciteten til en knapp som reagerer. For dette formålet vil vi bruke en TouchableOpacity-kode som vil inneholde en knappkode i den.
Kode:
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'
)
))
Produksjon:
Etter å ha trykket på denne knappen vil vi se endringen nedenfor.
Produksjon:
Konklusjon
Fra diskusjonen ovenfor har vi en klar forståelse av hvordan vi kan lage knapper for å reagere. Vi kan tilby forskjellige stiler og tilpasninger for å gi en bedre brukeropplevelse. Knappkomponent tilbyr å bygge inn animasjoner og klikkhendelsen deres kan håndteres ved hjelp av onPress-metoden.
Anbefalt artikkel
Dette er en guide til Button in React Native. Her diskuterer vi en introduksjon til knapp i React Native og dens typer sammen med kodeimplementering. Du kan også gå gjennom andre foreslåtte artikler for å lære mer -
- React Native vs React - Top Differences
- Topp 19 ReactJs intervjuspørsmål
- Metoder for JavaFX-knapp
- Topp 10 bruk av React JS