Базовые компоненты: View, Text, Image

В React Native нет HTML-тегов — экран собирают из готовых компонентов библиотеки react-native. Три самых нужных: View — контейнер для других элементов, Text — любой текст, Image — картинка.

View и Text

Откройте главный экран списка задач app/index.tsx и замените его содержимое:

// app/index.tsx
import { Text, View } from 'react-native';
 
export default function Index() {
  return (
    <View>
      <Text>Мои задачи</Text>
      <Text>Задач пока нет</Text>
    </View>
  );
}

На телефоне в левом верхнем углу появятся две строки. View похож на div: сам по себе он ничего не показывает, а группирует вложенные элементы. Строки идут сверху вниз, как блоки в вебе.

Вложенный Text

Text можно вкладывать в Text, чтобы выделить часть строки. Это похоже на span внутри абзаца:

// app/index.tsx
<Text>
  Выполнено: <Text style={{ fontWeight: 'bold' }}>2 из 5</Text>
</Text>

Получится одна строка, где «2 из 5» набрано жирным. Проп numberOfLines обрезает длинный текст многоточием: <Text numberOfLines={1}>.

Image: картинка из проекта

Локальную картинку подключают через require — Metro добавит файл в приложение:

// app/index.tsx
import { Image, Text, View } from 'react-native';
 
export default function Index() {
  return (
    <View>
      <Image
        source={require('@/assets/images/icon.png')}
        style={{ width: 64, height: 64 }}
      />
      <Text>Мои задачи</Text>
    </View>
  );
}

Над заголовком появится иконка приложения размером 64 на 64. Префикс @/ означает корень проекта — он настроен в tsconfig.json шаблона.

Image: картинка из интернета

Для картинки по адресу в source передают объект с полем uri. Размеры обязательны: React Native не знает их заранее.

// app/index.tsx
<Image
  source={{ uri: 'https://picsum.photos/200' }}
  style={{ width: 200, height: 200 }}
/>

После загрузки на экране появится случайная фотография 200 на 200.

Таблица соответствий

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

Писать текст прямо внутри View:

// app/index.tsx
// Неправильно:
<View>Мои задачи</View>

Приложение покажет красный экран с ошибкой «Text strings must be rendered within a Text component». Любой текст, даже одно слово или число, оборачивайте в Text.