Johdatus nappiin React Native -painikkeessa
Kuten tiedämme, painikkeet ovat avaintekijöitä käyttöliittymässä, joka toimii niiden painamisen jälkeen. Siksi on välttämätöntä oppia, kuinka painikkeet luodaan reaaliaikaisena. Tässä artikkelissa nähdään, kuinka painikkeet luodaan reaktinatiivissa, niiden syntaksi ja erityyppiset painikkeet, jotka ovat käytettävissä reaktinatiivissa. Näemme myös joitain esimerkkejä painikkeiden käytöstä reagoivissa sovelluksissa.
Syntaksi:
import React, ( Component ) from 'react'
import ( Button ) from 'react-native'
const Test = () => (
return (
< Button
//define the properties of button
/>
)
)
export default Test
Yllä oleva syntaksi osoittaa, kuinka painiketta käytetään reagoimaan natiiviin. Siihen kuuluu XML-tunnisteen määritteleminen painikeelementillä, nyt vaatimuksemme mukaan painikkeelle voidaan määritellä erilaisia ominaisuuksia. Tässä on luettelo ominaisuuksista niiden tyypin ja kuvauksen kanssa.
| PROPERTYNAME | Tyyppi | Käyttää |
| onPress | toimia | Tämä on vaadittava ominaisuus ja se vaatii sen toiminnan määrittämisen, joka suoritetaan, kun tätä painiketta napsautetaan. |
| otsikko | jono | Tämä on teksti, joka näytetään etiketissä painikkeessa, ja tämä on vaadittava ominaisuus. |
| Väri | Väri | Se on valinnainen ominaisuus, jota tarvitaan painikkeen taustavärin asettamiseen. |
| Liikuntarajoitteinen | boolean | Sitä käytetään painikkeen kosketustapahtumien poistamiseen käytöstä. |
| textID | jono | Se on valinnainen ominaisuus, joka tarvitaan painikkeen yksilöimiseksi. |
| Helppokäyttöisyysmerkki | jono | Käytetään sokeuden esteettömyyden tekstin näyttämiseen painikkeella. |
Nappityypit reagoivassa alkuperäisessä
Reaktin painikkeet voidaan luokitella seuraaviin tyyppeihin:
1. Perustyypit: Nämä kuuluvat perusluokkaan ja voivat olla seuraavia tyyppejä:
- Painike: Tätä käytetään napsautuspainikkeiden määrittelemiseen.
- Lähetä: Tämän tyyppistä painiketta käytetään lomakkeen kanssa tietojen toimittamiseen.
- Reset: Käytetään kentän sisällön tyhjentämiseen napsauttamalla sitä.
2. Litteä painike: Tämä tyyli ei sisällä taustaväriä. Jos haluat luoda tasaisen painikkeen reagoimaan, aseta CSS-luokka e-flat-arvoon.
3. Ääriviivapainike: Tämäntyyppisessä painikkeessa on reunus läpinäkyvällä taustalla. Luo tämäntyyppinen painike asettamalla CSS-luokka e-ääriviivaksi.
4. Pyöreä painike: Tämä painike on pyöreä. Pyöreän painikkeen luomiseksi aseta CSS-luokka e-kierrokselle.
5. Toggle-painike: Toggle-painike on painike, jonka tilaa voidaan muuttaa. Tarkastellaan esimerkkiä toisto- ja taukopainikkeesta. Tämän painikkeen napsautuksella sen tila muuttuu ja uuden napsautuksen jälkeen se palauttaa tilansa. Tämä tilanmuutostoiminto saavutetaan napsauttamalla painiketta. Vaihdetta varten on asetettava isToggle-ominaisuus totta.
Esimerkkejä nappia React Native -painikkeessa
Seuraavassa on esimerkkejä React Native -painikkeesta:
Esimerkki # 1
Asioiden aloittaminen antaa suunnitella yksinkertaisen painikkeen, joka näyttää sen napsautustapahtuman käsittelyn.
Koodi:
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")
));
lähtö:
Napsauttamalla yllä olevaa painiketta syntyy hälytys, joka näyttää ponnahdusikkunan tekstin kanssa.
lähtö:
Tämä hälytys syntyy, koska onPress-tapahtuma laukaistaan, joka kutsuu onPressButton-menetelmään, joka sisältää hälytyksen logiikan. Siksi yllä oleva esimerkki osoittaa, kuinka painike luodaan reagoimaan natiivina ja kuinka sen napsautustapahtumaa käsitellään.
Esimerkki 2
Tässä esimerkissä näemme kuinka voimme muuttaa painikkeen opasiteetin reagoidessaan. Tätä tarkoitusta varten käytämme TouchableOpacity -tagia, joka sisältää painetunnisteen siinä.
Koodi:
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'
)
))
lähtö:
Kun tätä painiketta on painettu, näemme alla olevan muutoksen.
lähtö:
johtopäätös
Yllä olevan keskustelun perusteella meillä on selkeä käsitys siitä, kuinka voimme luoda painikkeita reagoimaan. Voimme tarjota erilaisia tyylejä ja mukautuksia paremman käyttökokemuksen tarjoamiseksi. Painikekomponentti tarjoaa rakentaa animaatioita, ja niiden napsautustapahtumia voidaan käsitellä onPress-menetelmällä.
Suositeltava artikkeli
Tämä on opas Button in React Native -sovellukseen. Tässä keskustellaan React Native -painikkeen johdannosta ja sen tyypeistä sekä koodin toteutuksesta. Voit myös käydä läpi muiden ehdotettujen artikkeleidemme saadaksesi lisätietoja -
- Reagoi alkuperäiset vs. reagoi - suurimmat erot
- 19 ReactJ: n haastattelukysymystä
- JavaFX-painikkeen menetelmät
- React JS: n 10 suosituinta käyttöä