Introduktion till knapp i reaktivt infödda
Som vi vet att knappar är nyckelelement i ett användargränssnitt som fungerar efter att ha tryckt på dem. Därför är det nödvändigt att lära sig hur knappar skapas som reagera. I den här artikeln kommer vi att se hur knappar skapas i react native, deras syntax och olika typer av knappar tillgängliga i react native. Vi kommer också att se några exempel som visar användningen av knappar i reaktionsapplikationer.
Syntax:
import React, ( Component ) from 'react'
import ( Button ) from 'react-native'
const Test = () => (
return (
< Button
//define the properties of button
/>
)
)
export default Test
Ovanstående syntax visar hur en knapp används för att reagera. Det handlar om att definiera en XML-tagg med ett knappelement, nu enligt våra krav kan olika egenskaper definieras för en knapp. Här är listan över egenskaper med deras typ och beskrivning.
| Egendomsnamn | Typ | Använda sig av |
| onPress | fungera | Detta är en obligatorisk egenskap och den kräver att du anger den funktion som kommer att köras när du klickar på den här knappen. |
| Titel | Sträng | Detta är texten som skulle visas som en etikett på knappen och detta är en obligatorisk egenskap. |
| Färg | Färg | Det är en valfri egenskap som krävs för att ställa in bakgrundsfärgen på knappen. |
| Inaktiverad | boolean | Det används för att inaktivera beröringshändelser på en knapp. |
| textID | Sträng | Det är en valfri egenskap som krävs för att identifiera en knapp unikt. |
| Tillgänglighetsetikett | Sträng | Används för att visa text för tillgänglighet för blindhet på en knapp. |
Typer av knappar i reagera infödda
Knappar i React kan klassificeras i följande typer:
1. Grundtyper: Dessa faller i grundkategorin och kan vara av följande typer:
- Knapp: Detta används för att definiera klickknappar.
- Skicka: Denna typ av knapp används tillsammans med ett formulär för att skicka information.
- Återställ: Används för att rensa fältinnehållet genom att klicka på det.
2. Flat-knapp: Detta har en stil utan bakgrundsfärg. För att skapa en platt knapp i reaktion ställer du in CSS-klassen till e-platt.
3. Kontursknapp: Denna typ av knapp innehåller en kant med en transparent bakgrund. För att skapa denna typ av knapp, ställ in CSS-klassen som en e-disposition.
4. Rund knapp: Den här knappen är i cirkulär form. För att skapa en rund knapp ställer du in CSS-klassen till e-round.
5. Växla-knapp: Växla-knappen är en knapp vars tillstånd kan ändras. Låt oss överväga ett exempel på en spel- och pausknapp. På Klicka på den här knappen ändras dess tillstånd och efter ytterligare ett klick återgår det tillståndet. Denna tillståndsändringsfunktion uppnås genom att klicka på händelse av knappen. För att skapa en växling måste vi ställa in egenskapen Toggle till true.
Exempel på knapp i React Native
Nedan är exemplen på Button i React Native:
Exempel 1
För att starta saker kan design av en enkel knapp visa hur dess klickhändelse hanteras.
Koda:
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")
));
Produktion:
När du klickar på knappen ovan kommer en varning att genereras som visar popup med text.
Produktion:
Denna varning genereras på grund av onPress-händelse utlöses vilket kallar påPressButton-metoden som innehåller logiken för att visa varningen. Därför visar ovanstående exempel hur en knapp skapas i react native och hur dess klickhändelse hanteras.
Exempel 2
I det här exemplet ser vi hur vi kan ändra opaciteten hos en knapp som reagerar. För detta ändamål kommer vi att använda en TouchableOpacity-tagg som innehåller en knapptagg i den.
Koda:
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'
)
))
Produktion:
Efter att du har tryckt på den här knappen ser vi ändringen nedan.
Produktion:
Slutsats
Från diskussionen ovan har vi en klar förståelse för hur vi kan skapa knappar för att reagera. Vi kan tillhandahålla olika stilar och anpassningar för att ge en bättre användarupplevelse. Knappkomponenten erbjuder att bygga in animationer och deras klickhändelse kan hanteras med onPress-metoden.
Rekommenderad artikel
Detta är en guide till knappen i React Native. Här diskuterar vi en introduktion till knapp i React Native och dess typer tillsammans med kodimplementering. Du kan också gå igenom våra andra föreslagna artiklar för att lära dig mer -
- React Native vs React - Top Differences
- Topp 19 ReactJs intervjufrågor
- Metoder för JavaFX-knapp
- Topp 10 användningar av React JS