# react-native: RelativeTime
URL: https://generaltranslation.com/ru/docs/react-native/api/components/relativetime.mdx
---
title: RelativeTime
description: Справка API для компонента RelativeTime
---

{/* СГЕНЕРИРОВАНО АВТОМАТИЧЕСКИ: Не редактируйте напрямую. Редактируйте template в content/docs-templates/. */}


## Обзор

Компонент `<RelativeTime>` отображает локализованную строку относительного времени, например &quot;2 часа назад&quot; или &quot;через 3 дня&quot;.
Он поддерживает два режима использования: автоматический выбор наиболее подходящей единицы времени по объекту `Date` или явное указание значения и единицы времени.

```jsx
<RelativeTime>{someDate}</RelativeTime>
// Вывод: "2 hours ago"
```

Все форматирование выполняется локально с помощью API [`Intl.RelativeTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat).

<Callout type="warn">
  `<RelativeTime>` может вызывать **ошибки гидратации React** в приложениях с серверным рендерингом. См. раздел [Как избежать ошибок гидратации](#avoiding-hydration-errors) ниже.
</Callout>


## Справка

### Пропсы

<TypeTable
  type={{
  "children?": {
      description: 'Объект Date, на основе которого вычисляется относительное время.',
      type: 'Date',
      optional: true,
      default: 'undefined',
  },
  "date?": {
      description: 'Объект Date, на основе которого вычисляется относительное время. Имеет приоритет над children.',
      type: 'Date',
      optional: true,
      default: 'undefined',
  },
  "value?": {
      description: 'Явное числовое значение для относительного времени. Требует указания единицы времени.',
      type: 'number',
      optional: true,
      default: 'undefined',
  },
  "unit?": {
      description: 'Единица времени. Обязательна при использовании value.',
      type: 'Intl.RelativeTimeFormatUnit',
      optional: true,
      default: 'undefined',
  },
  "baseDate?": {
      description: 'Базовая дата для вычисления относительного времени. По умолчанию используется new Date() на момент рендеринга.',
      type: 'Date',
      optional: true,
      default: 'new Date()',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "options?": {
      type: 'Intl.RelativeTimeFormatOptions',
      optional: true,
      default: "{ numeric: 'auto', style: 'long' }",
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Описание

| Имя свойства | Описание                                                                                                                                                                                                                                                                             |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `children`   | Объект `Date`. Компонент автоматически выбирает наиболее подходящую единицу времени (секунды, минуты, часы, дни, недели, месяцы или годы) и форматирует время относительно `baseDate`.                                                                                               |
| `date`       | Объект `Date`, от которого вычисляется относительное время. Если указаны и `date`, и `children`, приоритет имеет `date`.                                                                                                                                                             |
| `value`      | Явно заданное числовое значение относительного времени (например, `-1` для «вчера»). Должно использоваться вместе с `unit`.                                                                                                                                                          |
| `unit`       | Единица времени (например, `'second'`, `'minute'`, `'hour'`, `'day'`, `'week'`, `'month'`, `'year'`). Обязательно при использовании `value`.                                                                                                                                         |
| `baseDate`   | Базовая дата для вычисления относительного времени. По умолчанию используется `new Date()` на момент рендеринга. **Укажите это значение явно, чтобы избежать ошибок гидратации** — см. [ниже](#avoiding-hydration-errors).                                                           |
| `options`    | Необязательные параметры форматирования в соответствии со спецификацией [`Intl.RelativeTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat). По умолчанию используются `numeric: 'auto'` и `style: 'long'`. |
| `locales`    | Необязательные локали для указания локали форматирования. Если они не заданы, используется локаль пользователя. Подробнее о том, как указывать локали, см. [здесь](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).          |

### Возвращает

`JSX.Element`, содержащий строку с относительным временем в соответствующем формате, или `null`, если дата или значение не указаны.

***

## Примеры

### Автоматический выбор единицы времени на основе Date

Передайте `Date` как дочерний элемент, и компонент автоматически выберет наиболее подходящую единицу времени.

```jsx title="PostTimestamp.jsx" copy
import { RelativeTime } from 'gt-react-native';

export default function PostTimestamp({ post }) {
    return (
        <RelativeTime>{post.createdAt}</RelativeTime> // [!code highlight]
    );
    // Вывод: "2 часа назад", "3 дня назад", "через 5 минут" и т.д.
}
```


### Использование свойства `date`

Вы также можете передать дату через свойство `date`, а не через `children`.

```jsx title="PostTimestamp.jsx" copy
import { RelativeTime } from 'gt-react-native';

export default function PostTimestamp({ post }) {
    return (
        <RelativeTime date={post.createdAt} /> // [!code highlight]
    );
}
```


### Явное значение и единица времени

Укажите точное значение и единицу времени по аналогии с API `Intl.RelativeTimeFormat`.

```jsx title="Reminder.jsx" copy
import { RelativeTime } from 'gt-react-native';

export default function Reminder() {
    return (
        <p>
            Your trial ends <RelativeTime value={3} unit="day" />. // [!code highlight]
        </p>
    );
    // Вывод: "Your trial ends in 3 days."
}
```


### Указание локалей

Отображение относительного времени для определённой локали.

```jsx title="FrenchTimestamp.jsx" copy
import { RelativeTime } from 'gt-react-native';

export default function FrenchTimestamp({ date }) {
    return (
        <RelativeTime locales={['fr-FR']}>{date}</RelativeTime> // [!code highlight]
    );
    // Вывод: "il y a 2 heures"
}
```


### Перевод RelativeTime

Оберните `<RelativeTime>` в компонент `<T>`, чтобы включить его в предложение, которое нужно перевести.

```jsx title="Comment.jsx" copy
import { T, RelativeTime } from 'gt-react-native';

export default function Comment({ comment }) {
    return (
        <T id="commentPosted">
            Posted <RelativeTime>{comment.createdAt}</RelativeTime> // [!code highlight]
        </T>
    );
}
```


### Настраиваемые параметры форматирования

Управляйте стилем вывода с помощью параметров `Intl.RelativeTimeFormat`.

```jsx title="NumericTimestamp.jsx" copy
import { RelativeTime } from 'gt-react-native';

export default function NumericTimestamp({ date }) {
    return (
        <RelativeTime
            options={{
                numeric: 'always', // [!code highlight]
                style: 'narrow', // [!code highlight]
            }}
        >
            {date}
        </RelativeTime>
    );
    // При numeric: 'always' выводит "1 day ago" вместо "yesterday"
}
```

***


## Как избежать ошибок гидратации

Поскольку `<RelativeTime>` вычисляет относительное время локально, он может выдавать **разный результат на сервере и клиенте**. Когда React сравнивает HTML, сгенерированный на сервере, с результатом рендеринга на клиенте, и они не совпадают, возникает ошибка гидратации.

Обычно это происходит в следующих случаях:

* **`baseDate` по умолчанию равен `new Date()` на момент рендеринга.** Сервер рендерит в один момент времени, а клиент проходит гидратацию через несколько секунд (или позже). Если за это время относительное время переходит границу единицы времени (например, &quot;59 seconds ago&quot; → &quot;1 minute ago&quot;), результат уже не совпадёт.
* **Локаль по умолчанию различается в разных окружениях.** Если локаль по умолчанию на сервере не совпадает с локалью клиента, итоговая строка может отличаться (например, &quot;hace 2 horas&quot; vs &quot;2 hours ago&quot;).

### Как это исправить

**Явно задайте `baseDate`**, чтобы сервер и клиент вычисляли одно и то же относительное время:

```jsx
const now = new Date(); // вычисляется один раз, передаётся и на сервер, и на клиент

<RelativeTime baseDate={now}>{post.createdAt}</RelativeTime>
```

**Явно укажите `locales`**, чтобы избежать несовпадения локалей:

```jsx
<RelativeTime locales={['en-US']} baseDate={now}>
  {post.createdAt}
</RelativeTime>
```

Если зафиксировать и локаль, и базовую дату, сервер и клиент всегда будут формировать строку в одном и том же формате.


## Примечания

* Компонент `<RelativeTime>` — это переменный компонент для форматирования значений относительного времени.
* При использовании автоматического режима (с `Date`) компонент сам выбирает наиболее подходящую единицу времени.
* Внутри компонент использует [`Intl.RelativeTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat).
* Параметры форматирования по умолчанию: `numeric: 'auto'` и `style: 'long'`.

## Следующие шаги

* Подробнее о компоненте `<RelativeTime>` и примеры использования других переменных компонентов, таких как `<DateTime>`, `<Currency>`, `<Num>` и `<Var>`, см. в документации [Использование переменных компонентов](/docs/react-native/guides/variables).