React Native: Новостное приложение — Урок 6 (начало)

Начинаем разработку новостного приложения на основе React Native. Код, домашние задания и дополнительная информация доступны на сайте itprager.com (ссылка в описании).

Создание проекта и начальная структура

Приложение создано. В App.js присутствует только компонент View без стилей. Папка components пуста. Приложение будет состоять из главной страницы и страницы с контактами, с возможностью добавления других страниц.

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

Для многостраничного приложения создадим глобальные стили. Создадим папку styles и файл style.js.

В style.js:

import { StyleSheet } from 'react-native';

export const gStyle = StyleSheet.create({
  main: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 20,
    color: '#333',
    fontFamily: 'mt-bold', // Добавлено имя шрифта
  },
});

main — стиль для родительских объектов, title — для текстовых заголовков.

Импорт в основной файл:

import { gStyle } from './styles/style';
// ...
<View style={gStyle.main}>
  {/* ... */}
</View>

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

Скачаем шрифт Montserrat (варианты Regular 300 и Bold 600) с fonts.google.com.

Создадим папку fonts и поместим туда скачанные файлы. Для подключения используем expo-font:

import * as Font from 'expo-font';
// ...

const loadFonts = async () => {
  await Font.loadAsync({
    'mt-bold': require('./fonts/Montserrat-Bold.ttf'),
    'mt-light': require('./fonts/Montserrat-Light.ttf'),
  });
};

const [fontLoaded, setFontLoaded] = useState(false);

useEffect(() => {
  loadFonts().then(() => setFontLoaded(true));
}, []);

if (!fontLoaded) {
  return <AppLoading />;
}

// ... остальной код

В useEffect запускается асинхронная загрузка шрифтов. AppLoading — компонент экрана загрузки из expo. После загрузки отображается основной контент. Для установки expo-font используйте expo install expo-font.

Пример использования:

<Text style={[gStyle.title, { fontFamily: 'mt-bold' }]>Hello</Text>

Компоненты для главной и страницы контактов

Создадим main.js и contacts.js в папке components.

В main.js:

// ... импорты
export const Main = () => {
  return (
    <View style={[gStyle.main, { paddingTop: 60 }]>
      <Text style={[gStyle.title, { textAlign: 'center' }]>Главная страница</Text>
    </View>
  );
};

Аналогично создадим компонент Contacts в contacts.js. Импортируем и отобразим компоненты в основном файле.

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