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

Знакомимся с тремя китами интерфейса React Native и видим, чем они отличаются от привычной HTML-вёрстки.

View, Text, Image — базовые компоненты React Native: контейнер, текст и изображение. Из них собирается почти любой экран.

View — контейнер вместо div

View — это базовый блок-контейнер. Он группирует другие элементы и задаёт раскладку. Прямой аналог <div> из веба, но без всякой семантики.

import { View } from "react-native";

function Card() {
  return (
    <View>
      {/* сюда вкладываем другие компоненты */}
    </View>
  );
}

Text — весь текст только здесь

Важнейшее отличие от веба: любой текст обязан быть внутри Text. Нельзя написать текст прямо внутри View — будет ошибка. В вебе вы могли положить текст в div, здесь — нет.

import { View, Text } from "react-native";

function Greeting() {
  return (
    <View>
      <Text>Заголовок</Text>
      <Text>Обычный абзац текста.</Text>
    </View>
  );
}

Нет тегов h1, p, span — есть только Text. Размер и жирность задаются стилями, а не разными тегами. Text можно вкладывать друг в друга, чтобы выделить часть фразы.

import { Text } from "react-native";

function Price() {
  return (
    <Text>
      Цена: <Text style={{ fontWeight: "bold" }}>990 ₽</Text>
    </Text>
  );
}

Image — картинки с обязательным размером

Image показывает изображение. Картинку из проекта подключают через require, а из сети — через объект с полем uri. Для сетевых картинок обязательно задать размеры через стиль, иначе ничего не отобразится.

import { Image } from "react-native";

function Avatar() {
  return (
    <Image
      source={{ uri: "https://example.com/avatar.png" }}
      style={{ width: 64, height: 64, borderRadius: 32 }}
    />
  );
}

Локальная картинка подключается иначе — путём через require, и её размеры RN может взять сам:

import { Image } from "react-native";

function Logo() {
  return <Image source={require("./assets/logo.png")} />;
}

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

Итог

• View — контейнер (как div), Text — любой текст, Image — картинка.
• Текст всегда внутри Text, голым в View его положить нельзя.
• Для сетевой картинки задавайте размеры в стиле, иначе она не появится.