Einführung in Button in React Native
Wie wir wissen, sind Schaltflächen Schlüsselelemente einer Benutzeroberfläche, die nach dem Drücken funktionieren. Daher ist es notwendig zu lernen, wie Schaltflächen in React Native erstellt werden. In diesem Artikel erfahren Sie, wie Schaltflächen in React Native erstellt werden, welche Syntax sie haben und welche Schaltflächentypen in React Native verfügbar sind. Außerdem werden wir einige Beispiele sehen, die die Verwendung von Schaltflächen in Reaktionsanwendungen zeigen.
Syntax:
import React, ( Component ) from 'react'
import ( Button ) from 'react-native'
const Test = () => (
return (
< Button
//define the properties of button
/>
)
)
export default Test
Die obige Syntax zeigt, wie eine Schaltfläche in React Native verwendet wird. Dabei wird ein XML-Tag mit einem Schaltflächenelement definiert. Je nach Anforderung können nun verschiedene Eigenschaften für eine Schaltfläche definiert werden. Hier ist die Liste der Immobilien mit Typ und Beschreibung.
| Name des Anwesens | Art | Verwenden |
| onPress | Funktion | Dies ist eine erforderliche Eigenschaft und erfordert die Angabe der Funktion, die ausgeführt wird, wenn auf diese Schaltfläche geklickt wird. |
| Titel | String | Dies ist der Text, der als Beschriftung auf der Schaltfläche angezeigt wird, und dies ist eine erforderliche Eigenschaft. |
| Farbe | Farbe | Es ist eine optionale Eigenschaft, die zum Festlegen der Hintergrundfarbe der Schaltfläche erforderlich ist. |
| Deaktiviert | Boolescher Wert | Es wird verwendet, um Berührungsereignisse einer Taste zu deaktivieren. |
| textID | String | Es ist eine optionale Eigenschaft, die erforderlich ist, um eine Schaltfläche eindeutig zu identifizieren. |
| Eingabehilfen | String | Dient zum Anzeigen von Text für die Erreichbarkeit einer Schaltfläche durch Blindheit. |
Arten von Schaltflächen in React Native
Schaltflächen in React können in folgende Typen unterteilt werden:
1. Grundtypen : Diese fallen in die Grundkategorie und können von den folgenden Typen sein:
- Schaltfläche : Dient zum Definieren von Klickschaltflächen.
- Senden: Diese Art von Schaltfläche wird zusammen mit einem Formular zum Senden von Details verwendet.
- Zurücksetzen: Dient zum Löschen des Feldinhalts beim Klicken darauf.
2. Flacher Knopf: Dies hat einen Stil ohne Hintergrundfarbe. Um eine flache Schaltfläche in "Reagieren" zu erstellen, setzen Sie die CSS-Klasse auf "Es".
3. Umrissschaltfläche: Diese Art von Schaltfläche enthält einen Rahmen mit einem transparenten Hintergrund. Um diesen Schaltflächentyp zu erstellen, legen Sie die CSS-Klasse als e-outline fest.
4. Runder Knopf: Dieser Knopf ist kreisförmig. Um eine runde Schaltfläche zu erstellen, setzen Sie die CSS-Klasse auf e-round.
5. Umschaltfläche: Die Umschaltfläche ist eine Schaltfläche, deren Status geändert werden kann. Betrachten wir ein Beispiel für eine Wiedergabe- und Pausetaste. Wenn Sie auf diese Schaltfläche klicken, wird der Status geändert und nach einem weiteren Klick wird der Status wiederhergestellt. Diese Zustandsänderungsfunktion wird durch Klicken auf die Schaltfläche erreicht. Um einen Toggle zu erstellen, müssen wir die Eigenschaft isToggle auf true setzen.
Beispiele für Button in React Native
Unten sind die Beispiele für Button in React Native aufgeführt:
Beispiel 1
Zum Starten können Sie eine einfache Schaltfläche entwerfen, die zeigt, wie das Klickereignis behandelt wird.
Code:
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")
));
Ausgabe:
Wenn Sie auf die obige Schaltfläche klicken, wird ein Alarm generiert, der das Popup mit Text anzeigt.
Ausgabe:
Diese Warnung wird generiert, weil das Ereignis onPress ausgelöst wird, das die Methode onPressButton aufruft, die die Logik zum Anzeigen der Warnung enthält. Das obige Beispiel zeigt daher, wie eine Schaltfläche im reaktionsnativen Modus erstellt wird und wie ihr Klickereignis behandelt wird.
Beispiel # 2
In diesem Beispiel sehen wir, wie wir die Deckkraft einer Schaltfläche beim Reagieren ändern können. Zu diesem Zweck verwenden wir ein TouchableOpacity-Tag, das ein Button-Tag enthält.
Code:
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'
)
))
Ausgabe:
Nach dem Drücken dieser Taste sehen wir die folgende Änderung.
Ausgabe:
Fazit
Aus der obigen Diskussion haben wir ein klares Verständnis dafür, wie wir Schaltflächen zum Reagieren erstellen können. Wir können verschiedene Stile und Anpassungen bereitstellen, um eine bessere Benutzererfahrung zu ermöglichen. Die Button-Komponente bietet die Möglichkeit, Animationen zu erstellen, und ihr Klickereignis kann mit der onPress-Methode verarbeitet werden.
Empfohlener Artikel
Dies ist eine Anleitung zu Button in React Native. Hier diskutieren wir eine Einführung in Button in React Native und seine Typen zusammen mit der Code-Implementierung. Sie können auch unsere anderen Artikelvorschläge durchgehen, um mehr zu erfahren -
- React Native vs React - Top Unterschiede
- Fragen in Vorstellungsgesprächen bei Top 19 ReactJs
- Methoden von JavaFX Button
- Die 10 häufigsten Anwendungen von React JS