Úvod do tlačítka v React Native
Jak víme, tlačítka jsou klíčovými prvky uživatelského rozhraní, které fungují po jejich stisknutí. Proto je nutné se naučit, jak jsou tlačítka vytvářena v reakčním nativním prostředí. V tomto článku si ukážeme, jak jsou tlačítka vytvářena v reagujících nativních, jejich syntaxi a různé typy tlačítek dostupných v reakčních nativních. Uvidíme také některé příklady ukazující použití tlačítek v reakčních aplikacích.
Syntax:
import React, ( Component ) from 'react'
import ( Button ) from 'react-native'
const Test = () => (
return (
< Button
//define the properties of button
/>
)
)
export default Test
Výše uvedená syntaxe ukazuje, jak se tlačítko používá v reakčním nativním prostředí. Zahrnuje definování značky XML pomocí prvku tlačítka, nyní podle našeho požadavku lze pro tlačítko definovat různé vlastnosti. Zde je seznam vlastností s jejich typem a popisem.
| Název vlastnosti | Typ | Použití |
| onPress | funkce | Toto je požadovaná vlastnost a vyžaduje specifikaci funkce, která bude vykonána po kliknutí na toto tlačítko. |
| Titul | Tětiva | Toto je text, který by se na tlačítku zobrazil jako štítek a je to požadovaná vlastnost. |
| Barva | Barva | Jedná se o volitelnou vlastnost vyžadovanou k nastavení barvy pozadí tlačítka. |
| Zakázáno | boolean | Používá se k deaktivaci dotykových událostí tlačítka. |
| textID | Tětiva | Jedná se o volitelnou vlastnost potřebnou k jedinečné identifikaci tlačítka. |
| Štítek přístupnosti | Tětiva | Slouží k zobrazení textu pro přístupnost slepoty k tlačítku. |
Typy tlačítek v React Native
Tlačítka v React lze rozdělit do následujících typů:
1. Základní typy: Patří do základní kategorie a mohou být následujících typů:
- Tlačítko: Slouží k definování tlačítek kliknutí.
- Odeslat: Tento typ tlačítka se používá spolu s formulářem k odeslání podrobností.
- Reset: Používá se k vymazání obsahu pole po jeho kliknutí.
2. Ploché tlačítko: Toto má styl bez barvy pozadí. Chcete-li v reakci vytvořit ploché tlačítko, nastavte třídu CSS na e-flat.
3. Tlačítko osnovy: Tento typ tlačítka obsahuje ohraničení s průhledným pozadím. Chcete-li vytvořit tento typ tlačítka, nastavte třídu CSS jako e-obrys.
4. Kruhové tlačítko: Toto tlačítko má kruhový tvar. Chcete-li vytvořit kulaté tlačítko, nastavte třídu CSS na e-round.
5. Přepínací tlačítko: Přepínací tlačítko je tlačítko, jehož stav lze změnit. Uvažujme příklad tlačítka pro přehrávání a pozastavení. Po kliknutí na toto tlačítko se změní jeho stav a po dalším kliknutí se obnoví jeho stav. Tato funkce změny stavu je dosažena kliknutím události tlačítka. K vytvoření přepínače musíme nastavit vlastnost isToggle na true.
Příklady tlačítka v React Native
Níže jsou uvedeny příklady tlačítka v React Native:
Příklad č. 1
Chcete-li začít věci, umožňuje návrh jednoduchého tlačítka ukázat, jak je zpracována událost kliknutí.
Kód:
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ýstup:
Po kliknutí na výše uvedené tlačítko se vygeneruje upozornění s vyskakovacím oknem s textem.
Výstup:
Toto varování je generováno kvůli události onPress, která je spuštěna a která volá metodu onPressButton, která obsahuje logiku zobrazování výstrahy. Proto výše uvedený příklad ukazuje, jak je tlačítko vytvořeno v reakčním nativním prostředí a jak je zpracována jeho událost click.
Příklad č. 2
V tomto příkladu vidíme, jak můžeme změnit neprůhlednost tlačítka v reakci. Za tímto účelem použijeme značku TouchableOpacity, která v ní bude obsahovat značku tlačítka.
Kód:
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ýstup:
Po stisknutí tohoto tlačítka uvidíme níže uvedenou změnu.
Výstup:
Závěr
Z výše uvedené diskuse jasně pochopíme, jak můžeme vytvořit tlačítka pro reakci. Můžeme poskytnout různé styly a přizpůsobení, abychom zajistili lepší uživatelský dojem. Komponenta tlačítka nabízí vestavěné animace a jejich kliknutí lze zpracovat pomocí metody onPress.
Doporučený článek
Toto je průvodce po Button in React Native. Zde diskutujeme Úvod do tlačítka v React Native a jeho typy spolu s implementací kódu. Další informace naleznete také v dalších navrhovaných článcích -
- Reagovat nativní vs Reagovat - hlavní rozdíly
- Top 19 reakčních otázek ReactJs
- Metody tlačítka JavaFX
- Top 10 použití React JS