Уроки React Native

#6 – Новостное приложение. Старт разработки

#6 – Новостное приложение. Старт разработки

Начиная с этого урока мы приступаем к разработке полноценного новостного приложения на основе React Native. За урок мы добавим свои собственные шрифты, научимся работать с глобальными стилями и дополнительно создадим несколько экранов для приложения.

Видеоурок

Глобальные стили

Работа с глобальными стилями сводится к созданию отдельного файла и подключению его внутри других файлов. В подобных файлах удобно прописывать стили, что будут принадлежат ко всему проекту. 


Пример подключения подобного файла может быть следующим:

import { globalStyle } from '../styles/style';


Подключение шрифтов

При работе со шрифтами все немного сложнее, нежели при работе со стилями. Сперва вам необходимо найти подходящий шрифт. Для этого можно использовать сервис Google Fonts. Вам нужно выбрать шрифт и скачать его на компьютер.


После этого добавьте шрифты внутрь проекта. Поскольку шрифты подгружаются не сразу, то необходимо установить их асинхронную подгрузку.


Пример реализации показан ниже:

import * as Font from 'expo-font';

const fonts = () => Font.loadAsync({
	// Можете подключить сколько-угодно шрифтов
	'mt-bold': require('./assets/fonts/Montserrat-Bold.ttf'),
	'mt-light': require('./assets/fonts/Montserrat-Light.ttf')
});

После выполнения этого процесса вы сможете их использовать внутри проекта.


Важно: Если проект в нынешней сборке у вас не запускается, то к компоненту «AppLoading» добавьте дополнительный атрибут onError={console.warn}.


Навигация

Тему навигации в уроке мы еще с вами детально не рассматривали. В то же время общую концепцию мы уже сделали. Для каждого отдельного экрана создавайте отдельный файл и подключайте его в основном файле. В зависимости от страницы отображайте разные компоненты.

Материалы для курса

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Также стоит посмотреть

Фреймворк Next JS / Изучение NextJS для начинающих
8 уроков
Изучение React JS / Redux библиотеки
9 уроков
Курс по React JS для начинающих
11 уроков
Создание приложения на React JS / Использование API
7 уроков
Практика React JS / Разработка магазина (eCommerce)
9 уроков
Комментарии
Добавить комментарий

Пока комментариев нет