Компонент Button

Компонент Button не принимает дочерние элементы. Подпись задаёт обязательный параметр title. Параметр color меняет цвет фона или заливки кнопки, а не цвет текста. Параметр onPress срабатывает при нажатии. Параметр disabled делает кнопку неактивной.

Синтаксис

<Button title="abcde" onPress={() => {}} />

Параметры

Параметр	Описание
`title`	Строка на кнопке. Параметр обязателен.
`onPress`	Вызов при нажатии на кнопку.
`color`	Цвет кнопки на iOS и акцент на Android.
`disabled`	При `true` нажатие не срабатывает.

Пример

Давайте вывести кнопку с подписью 'abcde':

import { View, Button } from 'react-native';

export default function App() {
	return (
		<View>
			<Button title="abcde" onPress={() => {}} />
		</View>
	);
}

На экране системная кнопка с текстом 'abcde'.

Пример

Давайте сменить цвет и отключить кнопку:

import { useState } from 'react';
import { View, Text, Button } from 'react-native';

export default function App() {
	const [label, setLabel] = useState('abcde');

	return (
		<View>
			<Button
				title="12345"
				color="#112233"
				disabled={label === '12345'}
				onPress={() => setLabel('12345')}
			/>
			<Text>{label}</Text>
		</View>
	);
}

На экране кнопка '12345' и строка состояния; после нажатия кнопка станет неактивной.

Смотрите также

компонент Pressable,
который собирает кнопку из своих дочерних элементов
компонент TouchableOpacity,
который затемняет содержимое при нажатии
компонент Text,
который рисует подпись в кастомной кнопке
компонент Modal,
который часто содержит кнопки действий