Компонент TouchableOpacity
Компонент TouchableOpacity оборачивает дочерние элементы
и вызывает onPress при касании.
Пока палец на области, непрозрачность падает до activeOpacity.
По умолчанию activeOpacity около 0.2.
Параметр disabled блокирует нажатие и затемнение.
Синтаксис
<TouchableOpacity onPress={() => {}}>
<Text>abcde</Text>
</TouchableOpacity>
Параметры
| Параметр | Описание |
|---|---|
children |
Дочерние элементы, которые затемняются при нажатии. |
onPress |
Вызов при коротком нажатии и отпускании. |
activeOpacity |
Непрозрачность во время нажатия от 0 до 1.
|
disabled |
При true нажатия не обрабатываются.
|
Пример
Давайте сменить подпись по нажатию:
import { useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
export default function App() {
const [label, setLabel] = useState('abcde');
return (
<View>
<TouchableOpacity onPress={() => setLabel('12345')}>
<Text>abcde</Text>
</TouchableOpacity>
<Text>{label}</Text>
</View>
);
}
На экране кнопка с 'abcde'; при касании она на миг темнеет, подпись меняется на '12345'.
Пример
Давайте задать своё activeOpacity:
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
export default function App() {
return (
<View>
<TouchableOpacity activeOpacity={0.5} onPress={() => {}}>
<Text style={styles.label}>12345</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
label: {
padding: 8,
},
});
На экране текст '12345'; при нажатии затемнение слабее, чем по умолчанию.
