React Native: Дизайн и стили в приложении (Урок 8)

Исправление нюанса из предыдущего урока

В прошлом уроке список был создан некорректно из-за отсутствия свойства key. Добавим ключи – 1, 2, 3 и т.д. Это не меняет внешний вид, но исправляет ошибку.

Добавление стилей к шапке навигации

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

{
  headerStyle: {
    backgroundColor: 'red',
    height: 110,
  },
  headerTitleStyle: {
    fontWeight: 'light',
  }
}

headerStyle устанавливает стили шапки (красный фон, высота 110 пикселей), а headerTitleStyle – стили текста в шапке (светлый вес шрифта). Аналогично можно стилизовать другие элементы навигации.

Добавление изображений и стилей к статьям

Добавим свойство img (URL изображения) в данные статьи:

{
  title: 'React',
  img: 'https://itprager.com/react.jpg',
  // ...другие свойства
}

Изображения отображаются компонентом <Image>:

<Image
  source={{ uri: item.img }}
  style={{ width: '100%', height: 200 }}
/>

uri указывает на URL, width и height – на размеры. Для улучшения дизайна добавим стили к заголовку и анонсу статьи, используя StyleSheet:

const styles = StyleSheet.create({
  title: {
    fontFamily: 'Roboto',
    fontSize: 22,
    textAlign: 'center',
    marginTop: 30,
    color: '#474747'
  },
  annonce: {
    fontFamily: 'Roboto-Light',
    fontSize: 16,
    textAlign: 'center',
    marginTop: 5,
    color: '#474747'
  },
  item: {
    width: '100%',
    marginBottom: 30
  },
  header: {
    fontSize: 25,
    marginTop: 25
  },
  image: {
    width: '100%',
    height: 200
  },
  full: {
    fontFamily: 'Roboto',
    fontSize: 22,
    textAlign: 'center',
    marginTop: 30,
    color: 'red'
  }
});

Стиль item добавляет отступ между статьями, header – для заголовка, image для картинки и full для особого стиля. Стиль применяется через style={styles.title}, style={styles.annonce} и т.д.

Отображение изображения в статье

Для отображения изображения в статье используем код:

<Image
  source={{ uri: route.params.img }}
  style={styles.image}
/>

Обратите внимание на использование стиля styles.image, определенного выше.

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