Въведение в бутона в React Native
Както знаем, че бутоните са ключови елементи на потребителски интерфейс, които работят след натискането им. Ето защо е необходимо да научите как се създават бутони в реагиране на нативен. В тази статия ще видим как се създават бутони в реагиращия нативен, техният синтаксис и различни видове бутони, налични в реагиращия нативен. Също така ще видим някои примери, показващи използването на бутони в реагиращите приложения.
Синтаксис:
import React, ( Component ) from 'react'
import ( Button ) from 'react-native'
const Test = () => (
return (
< Button
//define the properties of button
/>
)
)
export default Test
Горният синтаксис показва как се използва бутон за реагиране на нативен. Тя включва дефиниране на XML маркер с елемент на бутона, сега според нашето изискване за бутон могат да бъдат определени различни свойства. Ето списъка на имотите с техния тип и описание.
| Име на собственост | Тип | употреба |
| onPress | функция | Това е задължително свойство и изисква уточняване на функцията, която ще се изпълни при натискане на този бутон. |
| Заглавие | низ | Това е текстът, който ще бъде показан като етикет на бутона и това е задължително свойство. |
| цвят | цвят | Това е незадължително свойство, необходимо за задаване на цвета на фона на бутона. |
| хора с увреждания | булева | Използва се за деактивиране на събитията с докосване на бутон. |
| textID | низ | Това е незадължително свойство, необходимо за еднозначно идентифициране на бутон. |
| Етикет за достъпност | низ | Използва се за показване на текст за възможности за достъпност на слепота до бутон. |
Видове бутон в React Native
Бутоните в React могат да бъдат класифицирани в следните видове:
1. Основни типове: Те попадат в основната категория и могат да бъдат от следните видове:
- Бутон: Използва се за определяне на бутони за щракване.
- Изпращане: Този тип бутон се използва заедно с формуляр за изпращане на подробности.
- Нулиране: Използва се за изчистване на съдържанието на полето при щракване върху него.
2. Плосък бутон: има стил без цвят на фона. За да създадете плосък бутон в реакция, задайте клас CSS на e-flat.
3. Бутон за очертаване: Този тип бутон съдържа рамка с прозрачен фон. За да създадете този тип бутони, задайте класа CSS като е-контур.
4. Кръгъл бутон: Този бутон е с кръгла форма. За да създадете кръгъл бутон, задайте клас CSS на e-round.
5. Бутон Toggle: Бутонът Toggle е бутон, чието състояние може да бъде променено. Нека разгледаме пример за бутон за възпроизвеждане и пауза. При щракване на този бутон състоянието му се променя и след друго щракване той възстановява състоянието си. Тази функция за промяна на състоянието се постига чрез натискане на събитието на бутона. За да създадем превключвател, трябва да зададем свойството isToggle на true.
Примери за бутон в React Native
По-долу са примерите на Button in React Native:
Пример №1
За да започнете нещата, можете да създадете обикновен бутон, който показва как се обработва неговото събитие за кликване.
Код:
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")
));
изход:
При щракване върху горния бутон ще се генерира предупреждение, показващо изскачащото меню с текст.
изход:
Този сигнал се генерира поради задействане на събитие onPress, което извиква методаPPressButton, който съдържа логиката на показване на предупреждението. Оттук горният пример показва как се създава бутон в реагиращия нативен и как се обработва неговото кликване.
Пример №2
В този пример виждаме как можем да променим непрозрачността на един бутон в реакция. За тази цел ще използваме маркер TouchableOpacity, който ще съдържа етикет на бутон в него.
Код:
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'
)
))
изход:
След натискане на този бутон ще видим промяната по-долу.
изход:
заключение
От горната дискусия имаме ясно разбиране как можем да създадем бутони за реакция. Можем да предоставим различни стилове и персонализации, за да осигурим по-добро потребителско изживяване. Компонентът на бутоните предлага да се изграждат анимации и тяхното събитие за щракване може да се обработва чрез метода onPress.
Препоръчителен член
Това е ръководство за Бутон в React Native. Тук обсъждаме Въведение в бутона в React Native и неговите типове, заедно с прилагането на кода. Можете да разгледате и другите ни предложени статии, за да научите повече -
- React Native vs React - Топ разлики
- Топ 19 въпроса за интервю на ReactJs
- Методи на JavaFX бутон
- Топ 10 употреби на React JS