Введение в кнопку в 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. Кнопка Outline: кнопка этого типа содержит рамку с прозрачным фоном. Чтобы создать кнопку такого типа, установите класс CSS в качестве электронного контура.
4. Круглая кнопка: эта кнопка имеет круглую форму. Чтобы создать круглую кнопку, установите класс CSS в e-round.
5. Кнопка переключения : кнопка переключения - это кнопка, состояние которой можно изменить. Давайте рассмотрим пример кнопки воспроизведения и паузы. При нажатии этой кнопки ее состояние изменяется, и после другого нажатия она восстанавливает свое состояние. Эта функция изменения состояния достигается с помощью события нажатия кнопки. Для создания переключателя нам нужно установить для свойства isToggle значение true.
Примеры кнопок в React Native
Ниже приведены примеры Button в 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, которое вызывает метод onPressButton, который содержит логику отображения предупреждения. Следовательно, приведенный выше пример показывает, как создается кнопка в реагировать на натив и как обрабатывается ее событие нажатия.
Пример № 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'
)
))
Выход:
После нажатия этой кнопки мы увидим изменения ниже.
Выход:
Вывод
Из приведенного выше обсуждения у нас есть четкое понимание того, как мы можем создавать кнопки для реагирования. Мы можем предоставить различные стили и настройки для обеспечения лучшего пользовательского опыта. Компонент Button предлагает встроенную анимацию, а событие click может быть обработано с помощью метода onPress.
Рекомендуемая статья
Это руководство по кнопке в React Native. Здесь мы обсуждаем Введение в Button в React Native и его типах вместе с реализацией кода. Вы также можете просмотреть наши другие предлагаемые статьи, чтобы узнать больше -
- React Native vs React - главные отличия
- Лучшие 19 вопросов интервью ReactJs
- Методы JavaFX Button
- Топ 10 видов использования React JS