Увод у дугме Реацт Нативе
Као што знамо да су тастери кључни елементи корисничког интерфејса који раде након што их притиснете. Стога је неопходно научити како се стварају тастери у реакцији нативно. У овом чланку ћемо видети како се стварају тастери у реактивном нативу, њихова синтакса и различите врсте дугмади доступних у реактивном нативу. Такође ћемо видети неколико примера који приказују употребу дугмади у реакцијским апликацијама.
Синтакса:
import React, ( Component ) from 'react'
import ( Button ) from 'react-native'
const Test = () => (
return (
< Button
//define the properties of button
/>
)
)
export default Test
Горња синтакса приказује како се користи дугме у нативној реакцији. То укључује дефинисање КСМЛ ознаке са елементом дугмета, а према нашем захтеву могу се дефинисати различита својства за дугме. Ево листе некретнина са њиховим типом и описом.
| ПропертиНаме | Тип | Употреба |
| онПресс | функција | Ово је обавезно својство и захтева специфицирање функције која ће се извршити када се кликне ово дугме. |
| Наслов | Низ | Ово је текст који ће бити приказан као налепница на дугмету и ово је обавезно својство. |
| Боја | Боја | Необавезно је својство које је потребно за подешавање боје позадине дугмета. |
| Онемогућено | боолеан | Користи се за онемогућавање додирних догађаја дугмета. |
| тектИД | Низ | То је необавезна особина која је потребна да се јединствено идентификује дугме. |
| Ознака приступачности | Низ | Користи се за приказивање текста за способност приступачности слепцу тастеру. |
Врсте дугмета у Реацт Нативе
Тастери у Реацт-у се могу класификовати у следеће врсте:
1. Основни типови: спадају у основну категорију и могу бити следећег типа:
- Дугме: Ово се користи за дефинисање дугмади на клик.
- Пошаљите: Ова врста дугмета се користи заједно са обрасцем за слање детаља.
- Ресетовање: Користи се за брисање садржаја поља кликом на њега.
2. Равно дугме: Ово је стил без боје позадине. Да бисте реаговали равно дугме, поставите ЦСС класу на е-стан.
3. Дугме обриса: Ова врста дугмета садржи обруб са прозирном позадином. Да бисте креирали ову врсту дугмета, поставите ЦСС класу као е-обрис.
4. Округло дугме: Ово дугме је у кружном облику. Да бисте креирали дугме за округло дугме, поставите ЦСС класу на е-роунд.
5. Тастер за пребацивање: дугме за пребацивање је дугме чије се стање може променити. Размотримо пример дугмета за репродукцију и паузу. Када кликнете на ово дугме, његово стање се мења и након другог клика оно се враћа у стање. Ова функција промене стања постиже се кликом на дугме. За стварање преклопника морамо поставити својство исТоггле на труе.
Примери дугмета у Реацт Нативе
Испод су примери Буттон ин Реацт Нативе:
Пример # 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")
));
Излаз:
Кликом на горњи тастер створиће се упозорење које приказује искакање са текстом.
Излаз:
Ово упозорење се генерише због покретања догађаја онПресс који позива на методуПрессБуттон која садржи логику приказивања упозорења. Отуда горњи пример приказује како се ствара дугме у природној реакцији и како се управља догађајем клика.
Пример бр. 2
У овом примеру видимо како можемо да променимо непрозирност дугмета у реакцији. У ту сврху користићемо ознаку ТоуцхаблеОпацити која ће у себи садржавати ознаку дугмета.
Шифра:
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'
)
))
Излаз:
Након притиска на ово дугме видећемо промену у наставку.
Излаз:
Закључак
Из горње дискусије имамо јасно разумевање како можемо да створимо дугмад да реагујемо. Можемо пружити различите стилове и прилагођавања како бисмо пружили боље корисничко искуство. Компонента дугмета нуди уградњу у анимације и њиховим догађајем клика може се управљати помоћу методе онПресс.
Препоручени чланак
Ово је водич за Буттон у Реацт Нативе. Овде смо расправљали о Уводу у дугме Реацт Нативе и његовим типовима, заједно са имплементацијом кода. Можете и да прођете кроз друге наше предложене чланке да бисте сазнали више -
- Реацт Нативе вс Реацт - најбоље разлике
- Топ 19 питања о интервјуу за РеацтЈс
- Методе ЈаваФКС дугмета
- Топ 10 употреба Реацт ЈС-а