Вступ до кнопки в 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 з елементом кнопки, тепер відповідно до нашої вимоги для кнопки можна визначити різні властивості. Ось перелік властивостей з їх типом та описом.
| Назва власності | Тип | Використовуйте |
| onПрес | функція | Це необхідна властивість, і для цього потрібно вказати функцію, яка буде виконуватися при натисканні на цю кнопку. |
| Назва | Рядок | Це текст, який відображатиметься як мітка на кнопці, і це обов'язкова властивість. |
| Колір | Колір | Це необов'язкова властивість, необхідна для встановлення кольору фону кнопки. |
| Інваліди | булева | Він використовується для відключення подій торкання кнопки. |
| textID | Рядок | Це необов'язкова властивість, необхідна для однозначної ідентифікації кнопки. |
| Мітка доступності | Рядок | Використовується для відображення тексту для можливості доступу до сліпоти кнопці. |
Типи кнопок в "Реактивні тубільці"
Кнопки в React можна класифікувати на такі типи:
1. Основні типи: Вони підпадають під основні категорії і можуть бути таких типів:
- Кнопка: використовується для визначення кнопок клацання.
- Надіслати: Цей тип кнопки використовується разом із формою для надсилання реквізитів.
- Скидання: використовується для очищення вмісту поля при натисканні на нього.
2. Плоска кнопка: у стилі немає фонового кольору. Щоб створити плоску кнопку в реагуванні, встановіть для класу CSS e-flat.
3. Кнопка контуру: Цей тип кнопки містить рамку з прозорим фоном. Для створення цього типу кнопок встановіть клас CSS як е-контур.
4. Кругла кнопка: Ця кнопка має круглу форму. Для створення круглої кнопки встановіть клас CSS на e-round.
5. Кнопка переключення: кнопка переключення - це кнопка, стан якої можна змінити. Розглянемо приклад кнопки відтворення та паузи. Після натискання цієї кнопки її стан змінюється, а після іншого натискання він повертає свій стан. Ця функція зміни стану досягається натисканням кнопки події. Для створення перемикання нам потрібно встановити властивість isToggle на true.
Приклади кнопки в React Native
Нижче наведено приклади кнопки в 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 найкращих застосувань реактивної JS