Мобильные компоненты. События. Стили. Занятие №2-3

1.

ЗАНЯТИЕ №2-3
Мобильные компоненты.
События. Стили

2.

Switch
Компонент, представляющий из себя переключатель.
props:
value - значение типа boolean (желательно указать переменную)
thumbColor - цвет переключателя
trackColor - цвет дорожки переключателя
События:
onValueChange - срабатывает при изменении значения, в качестве параметра
принимает новое значение

3.

function App() {
let [val, setVal] = useState(false)
return (
<View
style={
{
justifyContent: 'center',
alignItems: 'center',
flex: 1,
backgroundColor: val ? 'white' : 'black'
}}>
<Switch value={val}
onValueChange={(newVal)=>setVal(newVal)}
thumbColor="orange"
/>
</View>
);
}

4.

ImageBackground
Работает схожим образом, как и компонент Image, однако позволяет
встраивать в себя дочерние компоненты.
Иными словами ImageBackground представляет собой аналог backgroundimage в CSS.

5.

import bg from './react.png'
function App() {
return (
<View style={{flex: 1}}>
<ImageBackground source={bg} style={{flex: 1,
justifyContent:"center", alignItems: "center"}}>
<Text> my text </Text>
</ImageBackground>
</View>
);
}

6.

ActivityIndicator
Индикатор загрузки.
props
animating - значение boolean, отображается или скрыт
color - цвет индикатора
size - размер индикатора, возможные значения - large и small

7.

Компоненты Touchable
Touchable компоненты является заменой компоненту Button, то есть это
области, по которым можно нажать на экране телефона.
Основных вариаций Touchable компонентов 3: TouchableWithoutFeedback,
TouchableHighlight и TouchableOpacity

8.

TouchableHighlight
TouchableHighlight подсвечивает область нажатия цветом. Цвет задаётся в props
underlayColor.
activeOpacity - степень прозрачности вложения в компонент. Задаётся в значениях
от 0 до 1, требует обязательного указания underlayColor
Дополнительные props:
https://reactnative.dev/docs/touchablehighlight

9.

TouchableOpacity
При нажатии обесцвечивает область.
activeOpacity - указывает, насколько обесцвечена будет внутренняя область
компонента.
Дополнительно:
https://reactnative.dev/docs/touchableopacity

10.

function App() {
let [val, setVal] = useState(0)
return (
<View
style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}>
<Text>{val}</Text>
<TouchableHighlight activeOpacity="0.5" onPress={()=>{setVal(val+1)}} underlayColor ="orange"
>
<Text>Нажми</Text>
</TouchableHighlight>
<TouchableOpacity activeOpacity="0.5" onPress={()=>{setVal(val+1)}} style ={{backgroundColor:
"orange"}}
>
<Text>Нажми</Text>
</TouchableOpacity>
</View>
);

11.

TouchableWithoutFeedback
Событие, которое никаким образом не изменяет вид приложения.
Можно использовать со своими эффектами или когда эффекты вообще не нужны.

12.

Дополнительные события

13.

onLongPress
Для компонентов TouchableHighlight и TouchableOpacity также существует
возможность задать событие onLongPress, которое сработает после 370мс.
Задержка нажатия может быть настроена с помощью delayLongPress

14.

onPressIn, onPressOut
Срабатывают в начале (onPressIn) нажатия и в моменте завершения нажатия
(onPressOut).
Обрабатываются до onPress

15.

Объект события PressEvent
Хранит информацию о нажатии. Имеет следующие свойства:
• changedTouches: массив всех событий, изменившихся с прошлого события
• identifier: идентификатор события
• locationX, locationY: координаты события (относительно компонента)
• pageX, pageY: координаты события (относительно приложения)
• target: идентификатор узла, вызвавшего события
• timestamp: время, прошедшее с запуска приложения до события
• touches: массив всех событий

16.

Задание
Создать приложение “Галерея”
Изображения сохранять в массиве в виде объектов со свойствами src(ссылка или
импортированное изображение, имя изображения).
Сделать возможность удалять и переименовывать изображения.
Выбор удаляемого изображения производить по долгому нажатию, после нажатия
показывать пункты удалить и переименовать.

17.

Конец