Картинки, ресурсы и иконки

Ресурсы (assets) — файлы, которые входят в приложение: картинки, шрифты, звуки. Для картинок из интернета Expo предлагает компонент expo-image с кешем и плавным появлением, а для значков — набор векторных иконок @expo/vector-icons.

Картинки из assets

Положите файл logo.png в папку assets/images проекта блога и подключите его через require:

// app/about.tsx
import { Image, View } from 'react-native';
 
export default function About() {
  return (
    <View style={{ flex: 1, alignItems: 'center', padding: 16 }}>
      <Image
        source={require('@/assets/images/logo.png')}
        style={{ width: 120, height: 120 }}
        resizeMode="contain"
      />
    </View>
  );
}

На экране «О приложении» появится логотип 120 на 120. resizeMode="contain" вписывает картинку целиком, сохраняя пропорции; cover заполняет весь блок, обрезая края.

Плотность экрана

Чтобы картинка была чёткой на экранах с высокой плотностью, рядом кладут версии в два и три раза больше: logo.png, logo@2x.png, logo@3x.png. В коде пишется только logo.png — React Native сам выберет подходящий файл.

expo-image

Компонент Image из пакета expo-image кеширует картинки на диске и умеет плавно их показывать. Установите его, если его нет в package.json:

npx expo install expo-image

Добавим обложку на экран статьи:

// app/posts/[id].tsx
import { Image } from 'expo-image';
 
<Image
  source={`https://picsum.photos/seed/${id}/600/300`}
  style={{ width: '100%', height: 180, borderRadius: 8 }}
  contentFit="cover"
  transition={300}
/>

Над текстом статьи появится фотография во всю ширину; она проявится за 300 миллисекунд. Повторное открытие той же статьи покажет картинку сразу, из кеша. У expo-image вместо resizeMode проп contentFit, а адрес можно передать строкой.

Векторные иконки

Пакет @expo/vector-icons уже установлен в шаблоне. В нём несколько наборов: Ionicons, MaterialIcons, FontAwesome и другие.

// app/posts/[id].tsx
import { Ionicons } from '@expo/vector-icons';
import { Text, View } from 'react-native';
 
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
  <Ionicons name="chatbubble-outline" size={18} color="#666" />
  <Text style={{ color: '#666' }}>5 комментариев</Text>
</View>

Рядом со счётчиком комментариев появится серый значок облачка. Иконка — это символ шрифта, поэтому её размер и цвет меняются пропсами size и color без потери чёткости. Найти имя иконки можно в каталоге на сайте icons.expo.fyi.

Частая ошибка

Собирать путь для require из переменной: require('@/assets/images/' + name). Metro находит файлы ресурсов при сборке и не может выполнить такой код — приложение не соберётся. Пишите каждый путь целиком, а если нужно выбирать картинку, сделайте объект: const icons = { cat: require('...cat.png'), dog: require('...dog.png') }.