Wprowadzenie do przycisku w React Native
Jak wiemy, przyciski są kluczowymi elementami interfejsu użytkownika, które działają po ich naciśnięciu. Dlatego konieczne jest nauczenie się, jak tworzone są przyciski w reakcyjnym środowisku macierzystym. W tym artykule zobaczymy, jak przyciski są tworzone w React Native, ich składnia i różne typy przycisków dostępne w React Native. Zobaczymy też kilka przykładów pokazujących użycie przycisków w aplikacjach reagujących.
Składnia:
import React, ( Component ) from 'react'
import ( Button ) from 'react-native'
const Test = () => (
return (
< Button
//define the properties of button
/>
)
)
export default Test
Powyższa składnia pokazuje, w jaki sposób przycisk jest używany w reakcji native. Polega na zdefiniowaniu znacznika XML z elementem przycisku, teraz zgodnie z naszymi wymaganiami dla przycisku można zdefiniować różne właściwości. Oto lista właściwości wraz z ich rodzajem i opisem.
| Nazwa właściwości | Rodzaj | Posługiwać się |
| onPress | funkcjonować | Jest to wymagana właściwość i wymaga określenia funkcji, która będzie wykonywana po kliknięciu tego przycisku. |
| Tytuł | Strunowy | Jest to tekst, który będzie wyświetlany jako etykieta na przycisku i jest to wymagana właściwość. |
| Kolor | Kolor | Jest to opcjonalna właściwość wymagana do ustawienia koloru tła przycisku. |
| Niepełnosprawny | boolean | Służy do wyłączania zdarzeń dotykowych przycisku. |
| textID | Strunowy | Jest to opcjonalna właściwość wymagana do jednoznacznej identyfikacji przycisku. |
| Etykieta dostępności | Strunowy | Służy do wyświetlania tekstu umożliwiającego dostęp do przycisku dla osób niewidomych. |
Rodzaje przycisków w React Native
Przyciski w React można podzielić na następujące typy:
1. Podstawowe typy: należą one do kategorii podstawowej i mogą być następujących typów:
- Przycisk: służy do definiowania przycisków kliknięcia.
- Prześlij: ten typ przycisku jest używany wraz z formularzem do przesyłania szczegółów.
- Resetuj: Służy do usuwania zawartości pola po kliknięciu.
2. Płaski przycisk: ma styl bez koloru tła. Aby utworzyć płaski przycisk w reakcji, ustaw klasę CSS na e-flat.
3. Przycisk konspektu: Ten typ przycisku zawiera ramkę z przezroczystym tłem. Aby utworzyć ten typ przycisku, ustaw klasę CSS jako e-kontur.
4. Okrągły przycisk: Ten przycisk ma okrągły kształt. Aby utworzyć okrągły przycisk, ustaw klasę CSS na e-round.
5. Przycisk przełączania: Przycisk przełączania to przycisk, którego stan można zmienić. Rozważmy przykład przycisku odtwarzania i pauzy. Po kliknięciu tego przycisku jego stan ulega zmianie, a po kolejnym kliknięciu odzyskuje swój stan. Tę funkcję zmiany stanu uzyskuje się poprzez kliknięcie przycisku. Aby utworzyć przełącznik, musimy ustawić właściwość isToggle na true.
Przykłady przycisku w React Native
Poniżej znajdują się przykłady przycisku w React Native:
Przykład 1
Aby rozpocząć, zaprojektujmy prosty przycisk pokazujący, jak obsługiwane jest jego zdarzenie kliknięcia.
Kod:
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")
));
Wynik:
Po kliknięciu powyższego przycisku zostanie wygenerowany alert z okienkiem z tekstem.
Wynik:
Ten alert jest generowany z powodu wyzwolenia zdarzenia onPress, które wywołuje metodę onPressButton, która zawiera logikę wyświetlania alertu. Dlatego powyższy przykład pokazuje, jak przycisk jest tworzony w reakcji native i jak obsługiwane jest jego zdarzenie kliknięcia.
Przykład nr 2
W tym przykładzie widzimy, jak możemy zmienić krycie przycisku w reakcji. W tym celu użyjemy tagu TouchableOpacity, który będzie zawierał tag przycisku.
Kod:
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'
)
))
Wynik:
Po naciśnięciu tego przycisku zobaczymy poniższą zmianę.
Wynik:
Wniosek
Z powyższej dyskusji jasno rozumiemy, jak możemy tworzyć przyciski reagowania. Możemy zapewnić różne style i dostosowania, aby zapewnić lepszą obsługę. Składnik przycisku oferuje wbudowane animacje, a ich zdarzenie kliknięcia można obsłużyć za pomocą metody onPress.
Polecany artykuł
Jest to przewodnik po przycisku w React Native. Tutaj omawiamy wprowadzenie do przycisku w React Native i jego typy wraz z implementacją kodu. Możesz także przejrzeć nasze inne sugerowane artykuły, aby dowiedzieć się więcej -
- React Native vs React - Najważniejsze różnice
- Top 19 pytań do wywiadu ReactJs
- Metody przycisku JavaFX
- Top 10 zastosowań React JS