React Native: Модальные окна, иконки и исправление ошибок

Исправление ошибок

При запуске проекта возможны ошибки в терминале. Ошибка использования свойства fontWeight со значением light связана с недопустимым значением. Используйте normal, bold или числовые значения (100–900, где большее число соответствует более жирному шрифту). В navigate, замените light на, например, 200.

Вторая ошибка связана с изображениями. Проблема в указании ширины и высоты внутри атрибута source. Оставьте в source только путь к картинке, а ширину и высоту задайте в атрибуте style, используя объект styles:

styles: {
  width: /* значение ширины */,
  height: /* значение высоты */
}

После перезапуска проекта ошибки должны исчезнуть. Если ошибки остаются на странице со статьей (fullInfo), выполните те же действия: укажите в source только путь к картинке и добавьте атрибут style со стилями из объекта styles. Не забудьте перезапустить сервер.

Добавление векторных иконок с помощью Expo Vector Icons

Для добавления кнопок используем векторные иконки. Установите библиотеку expo-vector-icons с помощью npm.

Чтобы использовать иконку, импортируйте нужный компонент:

import { Ionicons } from '@expo/vector-icons';

Затем используйте компонент, указав имя иконки, размер и цвет:

<Ionicons name="ios-add-circle" size={24} color="green" />

Можно добавить собственные стили:

styles: {
  icon: {
    textAlign: 'center',
    marginBottom: 15
  }
}

Реализация модального окна

Модальное окно создается с помощью компонента Modal. Необходимы кнопки для открытия и закрытия окна.

<Modal visible={modalWindow} animationType="slide">
  {/* Содержимое модального окна */}
</Modal>

Атрибут visible управляет видимостью окна: true для отображения и false для скрытия.

Внутри модального окна разместим иконку закрытия (close-circle) и текстовую надпись:

<Ionicons name="close-circle" size={24} color="red" style={styles.iconClose} />
<View><Text style={styles.title}>Форма добавления статей</Text></View>

Обратите внимание на стили iconClose и title.

Для управления видимостью создадим константу состояния modalWindow и функцию setModalWindow:

const [modalWindow, setModalWindow] = useState(false);

const setModalWindow = (value) => {
  setModalWindow(value);
};

В обработчиках событий кнопок вызываем setModalWindow(true) для открытия и setModalWindow(false) для закрытия модального окна:

<Ionicons name="ios-add-circle" size={34} color="green" onPress={() => setModalWindow(true)} />

<Ionicons name="close-circle" size={24} color="red" onPress={() => setModalWindow(false)} />

Важно: не называйте константу состояния просто modal, так как это зарезервированное слово.

В этом уроке мы освоили использование векторных иконок с помощью expo-vector-icons и реализовали функциональное модальное окно. В следующем уроке добавим форму в модальное окно для добавления статей.