МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

Чорноморський національний університет

імені Петра Могили
Факультет комп’ютерних наук
Кафедра інженерії програмного забезпечення

ЗВІТ
з лабораторної роботи № 4
«Використання компонентів ScrollView та TextInput у застосунку React Native»
Варіант № 31
Дисципліна «Програмування для мобільних пристроїв»
Спеціальність «Інженерія програмного забезпечення»
121–ЛР.04–109.22120925

Студент __________ А. Р. Швець

(підпис)
__17.09.2023 __
(дата)

Викладач _________ В. С. Раленко

(підпис)
_____________
(дата)

Миколаїв – 2023
 ЛАБОРАТОРНА РОБОТА №4
Тема роботи: Використання компонентів ScrollView та TextInput у
застосунку React Native.
Завдання:
Стврорити ScrollView з візуальних елементів, вивчених раніше, на ваш
розсуд. Динамічно вивести текст із компонента TextInput у компонент Text.
Теоретична частина:
1. Для чого призначений візуальний елемент ScrollView? Візуальний
елемент ScrollView призначений для створення прокрутного контейнера в
мобільних додатках. Він дозволяє розміщувати велику кількість вмісту на екрані,
який не вміщується повністю на екрані, і надає можливість користувачам
прокручувати цей вміст, щоб переглядати більше інформації.
2. Як задається напрям прокрутки ScrollView? Напрям прокрутки
ScrollView задається за допомогою реквізитів horizontal та vertical. Якщо
horizontal встановлено на true, то ScrollView буде горизонтально прокручувати
вміст. Якщо vertical встановлено на true, то прокрутка буде вертикальною.
Зазвичай одночасно можна використовувати лише один напрям (горизонтальний
або вертикальний).
3. Для чого призначені реквізити onChangeText та onSubmitEditing
візуального елементу TextInput?
 onChangeText: Цей реквізит використовується для визначення
функції, яка буде викликана при зміні текстового вмісту у TextInput. Кожен раз,
коли користувач вводить або змінює текст, ця функція виконується, і вона
отримує оновлений текст у якості аргументу.
 onSubmitEditing: Цей реквізит використовується для визначення
функції, яка буде викликана після того, як користувач натисне кнопку "Готово"
або подібну дію на клавіатурі. Використовується, наприклад, для обробки подій
після завершення редагування тексту.
 4. Перелічіть основні реквізити TextInput, що призначені для
налаштування: Основні реквізити TextInput, які можна налаштовувати,
включають:
 value: Вміст текстового поля.
 placeholder: Текст, який відображається в полі вводу як підказка для
користувача.
 onChangeText: Функція, яка викликається при зміні вмісту поля
вводу.
 onSubmitEditing: Функція, яка викликається при завершенні
редагування (наприклад, натисканні "Готово" на клавіатурі).
 secureTextEntry: Булевий реквізит для встановлення режиму пароля,
який приховує введений текст.
 keyboardType: Визначення типу клавіатури, яка відображається при
вводі тексту.
 autoCorrect: Булевий реквізит для включення / виключення
автоматичної корекції тексту.
 maxLength: Максимальна довжина тексту, яку користувач може
ввести.
 multiline: Булевий реквізит для включення багаторядкового режиму
введення тексту.
 placeholderTextColor: Колір тексту підказки (placeholder).
 style: Стилізація текстового поля, такі як кольори, шрифти, розмір і т.
д.
Ці реквізити дозволяють налаштовувати і керувати поведінкою та виглядом
візуального елементу TextInput в мобільному додатку.
Код:
import {TextInput, Text, View, StyleSheet} from "react-native";
import {useState} from "react";
export const CustomForm = () => {
const [text, setText] = useState("");

const handleTextChange = (text) => {

console.log(text);
setText(text);
}

return (
<View>
<Text style={styles.input}>{text}</Text>
<TextInput
onChangeText={handleTextChange}
style = {styles.input}
underlineColorAndroid = "transparent"
placeholder = "Type text"
placeholderTextColor = "#9a73ef"
autoCapitalize = "none"
/>
</View>
)
}

const styles = StyleSheet.create({

container: {
paddingTop: 23
},
input: {
margin: 15,
 height: 40,
borderColor: '#7a42f4',
borderWidth: 1
}
})
 Рисунок 1 – Робота програми
Висновок: Під час виконання лабораторної роботи, було створено
окремий компонент - форму. Вперше використано компоненти ScrollView та
TextInput. Задано стилі для цих елементів. А також було імпортовано ці
компоненти у головний застосунок. Звіт зроблено згідно рекомендацій.