@intlayer/docs 9.0.0-canary.5 → 9.0.0-canary.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/ar/intlayer_with_react_native+expo.md +56 -79
- package/docs/ar/packages/react-native-intlayer/exports.md +48 -14
- package/docs/de/intlayer_with_react_native+expo.md +50 -68
- package/docs/de/packages/react-native-intlayer/exports.md +47 -13
- package/docs/en/intlayer_with_react_native+expo.md +14 -18
- package/docs/en/packages/react-native-intlayer/exports.md +47 -13
- package/docs/en-GB/intlayer_with_react_native+expo.md +40 -94
- package/docs/en-GB/packages/react-native-intlayer/exports.md +51 -18
- package/docs/es/intlayer_with_react_native+expo.md +43 -80
- package/docs/es/packages/react-native-intlayer/exports.md +47 -13
- package/docs/fr/intlayer_with_react_native+expo.md +54 -68
- package/docs/fr/packages/react-native-intlayer/exports.md +47 -13
- package/docs/hi/intlayer_with_react_native+expo.md +90 -87
- package/docs/hi/packages/react-native-intlayer/exports.md +48 -14
- package/docs/id/intlayer_with_react_native+expo.md +45 -33
- package/docs/id/packages/react-native-intlayer/exports.md +47 -13
- package/docs/it/intlayer_with_react_native+expo.md +32 -72
- package/docs/it/packages/react-native-intlayer/exports.md +47 -13
- package/docs/ja/intlayer_with_react_native+expo.md +98 -137
- package/docs/ja/packages/react-native-intlayer/exports.md +47 -14
- package/docs/ko/intlayer_with_react_native+expo.md +231 -29
- package/docs/ko/packages/react-native-intlayer/exports.md +48 -14
- package/docs/pl/intlayer_with_react_native+expo.md +75 -46
- package/docs/pl/packages/react-native-intlayer/exports.md +47 -13
- package/docs/pt/intlayer_with_react_native+expo.md +38 -75
- package/docs/pt/packages/react-native-intlayer/exports.md +47 -13
- package/docs/ru/intlayer_with_react_native+expo.md +71 -60
- package/docs/ru/packages/react-native-intlayer/exports.md +49 -16
- package/docs/tr/intlayer_with_react_native+expo.md +30 -56
- package/docs/tr/packages/react-native-intlayer/exports.md +48 -15
- package/docs/uk/intlayer_with_react_native+expo.md +64 -52
- package/docs/uk/packages/react-native-intlayer/exports.md +47 -13
- package/docs/vi/intlayer_with_react_native+expo.md +43 -32
- package/docs/vi/packages/react-native-intlayer/exports.md +47 -13
- package/docs/zh/intlayer_with_react_native+expo.md +216 -82
- package/docs/zh/packages/react-native-intlayer/exports.md +48 -14
- package/package.json +6 -6
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-06-18
|
|
3
|
-
updatedAt: 2026-
|
|
3
|
+
updatedAt: 2026-06-25
|
|
4
4
|
title: "Expo + React Native i18n - Kompletny przewodnik po tłumaczeniu swojej aplikacji"
|
|
5
5
|
description: "Koniec z i18next. Przewodnik 2026 do budowania wielojęzycznej (i18n) aplikacji Expo + React Native. Tłumacz z agentami AI i optymalizuj rozmiar bundle, SEO i wydajność."
|
|
6
6
|
keywords:
|
|
@@ -17,6 +17,9 @@ slugs:
|
|
|
17
17
|
applicationTemplate: https://github.com/aymericzip/intlayer-react-native-template
|
|
18
18
|
applicationShowcase: https://intlayer-react-native.vercel.app
|
|
19
19
|
history:
|
|
20
|
+
- version: 9.0.0
|
|
21
|
+
date: 2026-06-25
|
|
22
|
+
changes: "Importowanie providerów i hooków bezpośrednio z react-native-intlayer; react-intlayer nie jest już potrzebny jako bezpośrednia zależność"
|
|
20
23
|
- version: 8.9.0
|
|
21
24
|
date: 2026-05-04
|
|
22
25
|
changes: "Aktualizacja użycia API useIntlayer w Solid do bezpośredniego dostępu do właściwości"
|
|
@@ -63,38 +66,55 @@ author: aymericzip
|
|
|
63
66
|
|
|
64
67
|
<TOC/>
|
|
65
68
|
|
|
66
|
-
## Dlaczego
|
|
69
|
+
## Dlaczego Intlayer zamiast alternatyw?
|
|
67
70
|
|
|
68
|
-
W porównaniu do głównych rozwiązań, takich jak
|
|
71
|
+
W porównaniu do głównych rozwiązań, takich jak `react-native-localize` czy `i18next`, Intlayer jest rozwiązaniem wyposażonym w zintegrowane optymalizacje, takie jak:
|
|
69
72
|
|
|
70
|
-
|
|
73
|
+
<AccordionGroup>
|
|
74
|
+
|
|
75
|
+
<Accordion header="Pełne pokrycie React Native">
|
|
71
76
|
|
|
72
77
|
Intlayer jest zoptymalizowany do doskonałej współpracy z React Native i Expo, oferując **zakres treści na poziomie komponentów**, **obsługę TypeScript** i wszystkie funkcje potrzebne do skalowania internacjonalizacji (i18n) w aplikacjach mobilnych.
|
|
73
78
|
|
|
74
|
-
|
|
79
|
+
</Accordion>
|
|
80
|
+
|
|
81
|
+
<Accordion header="Łatwość konserwacji">
|
|
82
|
+
|
|
83
|
+
Określanie zakresu zawartości aplikacji **ułatwia konserwację** aplikacji na dużą skalę. Możesz powielić lub usunąć pojedynczy folder funkcji bez obciążania psychicznego koniecznością przeglądania całej bazy kodu zawartości. Dodatkowo Intlayer jest **w pełni typowany**, aby zapewnić dokładność treści.
|
|
84
|
+
|
|
85
|
+
</Accordion>
|
|
86
|
+
|
|
87
|
+
<Accordion header="Agent AI">
|
|
75
88
|
|
|
76
|
-
|
|
89
|
+
Wspólna lokalizacja treści **zmniejsza potrzebny kontekst** dzięki modelom dużego języka (LLM). Intlayer zawiera także zestaw narzędzi, takich jak **CLI** do sprawdzania brakujących tłumaczeń, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** i **[umiejętności agenta](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, aby praca programisty (DX) była jeszcze płynniejsza dla agentów AI.
|
|
77
90
|
|
|
78
|
-
|
|
91
|
+
</Accordion>
|
|
79
92
|
|
|
80
|
-
|
|
93
|
+
<Accordion header="Automatyzacja">
|
|
81
94
|
|
|
82
|
-
**
|
|
95
|
+
Korzystaj z automatyzacji, aby tłumaczyć w swoim potoku CI/CD przy użyciu wybranego LLM na koszt dostawcy sztucznej inteligencji. Intlayer oferuje także **kompilator** do automatyzacji ekstrakcji treści, a także [platformę internetową](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), która pomaga **tłumaczyć w tle**.
|
|
83
96
|
|
|
84
|
-
|
|
97
|
+
</Accordion>
|
|
85
98
|
|
|
86
|
-
|
|
99
|
+
<Accordion header="Wydajność">
|
|
87
100
|
|
|
88
|
-
Łączenie ogromnych plików JSON z komponentami może prowadzić do problemów z wydajnością i reaktywnością.
|
|
101
|
+
Łączenie ogromnych plików JSON z komponentami może prowadzić do problemów z wydajnością i reaktywnością. Intlayer optymalizuje ładowanie treści w czasie kompilacji.
|
|
89
102
|
|
|
90
|
-
|
|
103
|
+
</Accordion>
|
|
91
104
|
|
|
92
|
-
|
|
105
|
+
<Accordion header="Skalowanie bez użycia dewelopera">
|
|
93
106
|
|
|
94
|
-
**
|
|
107
|
+
Więcej niż tylko rozwiązanie i18n, Intlayer zapewnia **samodzielny [edytor wizualny](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** i **[pełny CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, który pomoże Ci zarządzać wielojęzyczną treścią w **czasie rzeczywistym**, dzięki czemu współpraca z tłumaczami, copywriterami i innymi członkami zespołu będzie płynna. Treść może być przechowywana lokalnie i/lub zdalnie.
|
|
108
|
+
|
|
109
|
+
</Accordion>
|
|
110
|
+
|
|
111
|
+
<Accordion header="Rozmiar bundle'a">
|
|
95
112
|
|
|
96
113
|
Zamiast ładować ogromne pliki JSON na swoje strony, ładuj tylko niezbędną treść. Intlayer pomaga **zmniejszyć rozmiary pakietów i wyświetleń nawet o 50%**.
|
|
97
114
|
|
|
115
|
+
</Accordion>
|
|
116
|
+
</AccordionGroup>
|
|
117
|
+
|
|
98
118
|
<Steps>
|
|
99
119
|
|
|
100
120
|
<Step number={1} title="Zainstaluj zależności">
|
|
@@ -103,28 +123,40 @@ Zobacz [Szablon aplikacji](https://github.com/aymericzip/intlayer-react-native-t
|
|
|
103
123
|
|
|
104
124
|
Z projektu React Native zainstaluj następujące pakiety:
|
|
105
125
|
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
npm install --save-dev reagują-native-intlayer
|
|
109
|
-
inicjacja międzywarstwy npx
|
|
126
|
+
```bash packageManager="npm"
|
|
127
|
+
npx intlayer-cli init --interactive
|
|
110
128
|
```
|
|
111
129
|
|
|
112
|
-
```
|
|
113
|
-
pnpm
|
|
114
|
-
pnpm add --save-dev reagują-native-intlayer
|
|
115
|
-
pnpm inicjacja warstwy międzywarstwowej
|
|
130
|
+
```bash packageManager="pnpm"
|
|
131
|
+
pnpm dlx intlayer-cli init --interactive
|
|
116
132
|
```
|
|
117
133
|
|
|
118
|
-
```bash packageManager="
|
|
119
|
-
|
|
120
|
-
przędza dodaj --save-dev reagująca-natywna-warstwa
|
|
121
|
-
init międzywarstwy przędzy
|
|
134
|
+
```bash packageManager="yarn"
|
|
135
|
+
yarn dlx intlayer-cli init --interactive
|
|
122
136
|
```
|
|
123
137
|
|
|
124
|
-
```
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
138
|
+
```bash packageManager="bun"
|
|
139
|
+
bunx intlayer-cli init --interactive
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
> Flaga `--interactive` jest opcjonalna. Użyj `intlayer-cli init`, jeśli jesteś agentem AI.
|
|
143
|
+
|
|
144
|
+
> To polecenie wykryje Twoje środowisko i zainstaluje wymagane pakiety. Na przykład:
|
|
145
|
+
|
|
146
|
+
```bash packageManager="npm"
|
|
147
|
+
npm install intlayer react-native-intlayer
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
```bash packageManager="pnpm"
|
|
151
|
+
pnpm add intlayer react-native-intlayer
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
```bash packageManager="yarn"
|
|
155
|
+
yarn add intlayer react-native-intlayer
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
```bash packageManager="bun"
|
|
159
|
+
bun add intlayer react-native-intlayer
|
|
128
160
|
```
|
|
129
161
|
|
|
130
162
|
### Pakiety
|
|
@@ -132,17 +164,14 @@ kok x inicjacja międzywarstwy
|
|
|
132
164
|
- **intlayer**
|
|
133
165
|
Podstawowe narzędzie i18n do konfiguracji, zawartości słownika, generowania typów oraz poleceń CLI.
|
|
134
166
|
|
|
135
|
-
- **react-intlayer**
|
|
136
|
-
Integracja z React, która dostarcza dostawców kontekstu oraz hooki React, których użyjesz w React Native do pobierania i przełączania lokalizacji.
|
|
137
|
-
|
|
138
167
|
- **react-native-intlayer**
|
|
139
|
-
Integracja z React Native, która dostarcza wtyczkę Metro do integracji Intlayer z bundlerem React Native.
|
|
168
|
+
Integracja z React Native, która dostarcza dostawców kontekstu oraz hooki React do pobierania i przełączania lokalizacji, polyfille dla React Native oraz wtyczkę Metro do integracji Intlayer z bundlerem React Native. Reeksportuje wszystko z `react-intlayer`, więc w aplikacji React Native potrzebny jest tylko ten jeden pakiet.
|
|
140
169
|
|
|
141
170
|
---
|
|
142
171
|
|
|
143
172
|
</Step>
|
|
144
173
|
|
|
145
|
-
<Step number={
|
|
174
|
+
<Step number={2} title="Utwórz konfigurację Intlayer">
|
|
146
175
|
|
|
147
176
|
W katalogu głównym projektu (lub w dowolnym wygodnym miejscu) utwórz plik **konfiguracji Intlayer**. Może on wyglądać tak:
|
|
148
177
|
|
|
@@ -176,7 +205,7 @@ W ramach tej konfiguracji możesz:
|
|
|
176
205
|
|
|
177
206
|
</Step>
|
|
178
207
|
|
|
179
|
-
<Step number={
|
|
208
|
+
<Step number={3} title="Dodaj wtyczkę Metro">
|
|
180
209
|
|
|
181
210
|
Metro to bundler dla React Native. Jest to domyślny bundler dla projektów React Native tworzonych za pomocą polecenia `react-native init`. Aby używać Intlayer z Metro, musisz dodać wtyczkę do pliku `metro.config.js`:
|
|
182
211
|
|
|
@@ -196,11 +225,11 @@ module.exports = (async () => {
|
|
|
196
225
|
|
|
197
226
|
</Step>
|
|
198
227
|
|
|
199
|
-
<Step number={
|
|
228
|
+
<Step number={4} title="Dodaj dostawcę Intlayer">
|
|
200
229
|
|
|
201
230
|
Aby utrzymać synchronizację języka użytkownika w całej aplikacji, musisz opakować swój komponent root w komponent `IntlayerProvider` z `react-native-intlayer`.
|
|
202
231
|
|
|
203
|
-
>
|
|
232
|
+
> Zawsze importuj z `react-native-intlayer`. Jego `IntlayerProvider` zawiera polyfille dla web API używanego przez Intlayer, a pakiet reeksportuje wszystkie hooki i narzędzia z `react-intlayer`.
|
|
204
233
|
|
|
205
234
|
Dodatkowo, musisz dodać funkcję `intlayerPolyfill` do swojego pliku `index.js`, aby zapewnić prawidłowe działanie Intlayer.
|
|
206
235
|
|
|
@@ -227,7 +256,7 @@ export default RootLayout;
|
|
|
227
256
|
|
|
228
257
|
</Step>
|
|
229
258
|
|
|
230
|
-
<Step number={
|
|
259
|
+
<Step number={5} title="Zadeklaruj swoją zawartość">
|
|
231
260
|
|
|
232
261
|
Utwórz pliki **deklaracji zawartości** w dowolnym miejscu w swoim projekcie (zwykle w katalogu `src/`), używając dowolnego z formatów rozszerzeń obsługiwanych przez Intlayer:
|
|
233
262
|
|
|
@@ -298,7 +327,7 @@ export default homeScreenContent;
|
|
|
298
327
|
|
|
299
328
|
</Step>
|
|
300
329
|
|
|
301
|
-
<Step number={
|
|
330
|
+
<Step number={6} title="Użyj Intlayer w swoich komponentach">
|
|
302
331
|
|
|
303
332
|
Użyj hooka `useIntlayer` w komponentach potomnych, aby uzyskać zlokalizowaną zawartość.
|
|
304
333
|
|
|
@@ -306,7 +335,7 @@ Użyj hooka `useIntlayer` w komponentach potomnych, aby uzyskać zlokalizowaną
|
|
|
306
335
|
|
|
307
336
|
```tsx fileName="app/(tabs)/index.tsx" codeFormat={["typescript", "esm"]}
|
|
308
337
|
import { Image, StyleSheet, Platform } from "react-native";
|
|
309
|
-
import { useIntlayer } from "react-intlayer";
|
|
338
|
+
import { useIntlayer } from "react-native-intlayer";
|
|
310
339
|
import { HelloWave } from "@/components/HelloWave";
|
|
311
340
|
import ParallaxScrollView from "@/components/ParallaxScrollView";
|
|
312
341
|
import { ThemedText } from "@/components/ThemedText";
|
|
@@ -353,7 +382,7 @@ export default HomeScreen;
|
|
|
353
382
|
|
|
354
383
|
</Step>
|
|
355
384
|
|
|
356
|
-
<Step number={
|
|
385
|
+
<Step number={7} title="Zmiana lokalizacji aplikacji" isOptional={true}>
|
|
357
386
|
|
|
358
387
|
Aby zmienić lokalizację z poziomu komponentów, możesz użyć metody `setLocale` hooka `useLocale`:
|
|
359
388
|
|
|
@@ -361,7 +390,7 @@ Aby zmienić lokalizację z poziomu komponentów, możesz użyć metody `setLoca
|
|
|
361
390
|
import { type FC } from "react";
|
|
362
391
|
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
|
|
363
392
|
import { getLocaleName } from "intlayer";
|
|
364
|
-
import { useLocale } from "react-intlayer";
|
|
393
|
+
import { useLocale } from "react-native-intlayer";
|
|
365
394
|
|
|
366
395
|
export const LocaleSwitcher: FC = () => {
|
|
367
396
|
const { setLocale, availableLocales } = useLocale();
|
|
@@ -438,7 +467,7 @@ To umożliwia funkcje takie jak:
|
|
|
438
467
|
Aby uniknąć zatwierdzania automatycznie generowanych plików przez Intlayer, dodaj następujące wpisy do swojego `.gitignore`:
|
|
439
468
|
|
|
440
469
|
```bash
|
|
441
|
-
#
|
|
470
|
+
# Ignoruj pliki generowane przez Intlayer
|
|
442
471
|
.intlayer
|
|
443
472
|
```
|
|
444
473
|
|
|
@@ -479,7 +508,7 @@ Intlayer jest przede wszystkim skierowany do Web Intl API; na React Native musis
|
|
|
479
508
|
|
|
480
509
|
Lista kontrolna:
|
|
481
510
|
|
|
482
|
-
- Używaj najnowszych wersji `intlayer
|
|
511
|
+
- Używaj najnowszych wersji `intlayer` oraz `react-native-intlayer`.
|
|
483
512
|
- Włącz polyfill Intlayer.
|
|
484
513
|
- Jeśli używasz `getLocaleName` lub innych narzędzi opartych na API Intl, zaimportuj te polyfille wcześnie (na przykład w `index.js` lub `App.tsx`):
|
|
485
514
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2026-01-21
|
|
3
|
-
updatedAt: 2026-
|
|
3
|
+
updatedAt: 2026-06-25
|
|
4
4
|
title: Dokumentacja pakietu react-native-intlayer
|
|
5
|
-
description: Wsparcie React Native dla Intlayer, zapewniające providerów i
|
|
5
|
+
description: Wsparcie React Native dla Intlayer, zapewniające providerów, hooki, polyfille i konfigurację Metro.
|
|
6
6
|
keywords:
|
|
7
7
|
- react-native-intlayer
|
|
8
8
|
- react-native
|
|
@@ -14,6 +14,9 @@ slugs:
|
|
|
14
14
|
- react-native-intlayer
|
|
15
15
|
- exports
|
|
16
16
|
history:
|
|
17
|
+
- version: 9.0.0
|
|
18
|
+
date: 2026-06-25
|
|
19
|
+
changes: "Reeksportowanie pełnego API react-intlayer (hooki, narzędzia, podścieżki format/html/markdown), aby aplikacja React Native zależała tylko od react-native-intlayer"
|
|
17
20
|
- version: 8.0.0
|
|
18
21
|
date: 2026-01-21
|
|
19
22
|
changes: "Ujednolicona dokumentacja dla wszystkich eksportów"
|
|
@@ -22,7 +25,9 @@ author: aymericzip
|
|
|
22
25
|
|
|
23
26
|
# Pakiet react-native-intlayer
|
|
24
27
|
|
|
25
|
-
Pakiet `react-native-intlayer` dostarcza niezbędne narzędzia do integracji Intlayer z aplikacjami React Native.
|
|
28
|
+
Pakiet `react-native-intlayer` dostarcza niezbędne narzędzia do integracji Intlayer z aplikacjami React Native. Reeksportuje pełne API `react-intlayer` (hooki i narzędzia) wraz z gotowym na React Native `IntlayerProvider`, a także polyfille i konfigurację Metro wymaganą przez React Native.
|
|
29
|
+
|
|
30
|
+
> W aplikacji React Native importuj **wszystko** z `react-native-intlayer`. Nie musisz instalować ani importować `react-intlayer` bezpośrednio.
|
|
26
31
|
|
|
27
32
|
## Instalacja
|
|
28
33
|
|
|
@@ -34,14 +39,30 @@ npm install react-native-intlayer
|
|
|
34
39
|
|
|
35
40
|
### Provider
|
|
36
41
|
|
|
37
|
-
| Komponent | Opis
|
|
38
|
-
| ------------------ |
|
|
39
|
-
| `IntlayerProvider` | Komponent Provider, który otacza Twoją aplikację i udostępnia kontekst Intlayer. |
|
|
42
|
+
| Komponent | Opis |
|
|
43
|
+
| ------------------ | -------------------------------------------------------------------------------------------------------------------------- |
|
|
44
|
+
| `IntlayerProvider` | Komponent Provider, który otacza Twoją aplikację i udostępnia kontekst Intlayer. Automatycznie stosuje wymagane polyfille. |
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
import { IntlayerProvider } from "react-native-intlayer";
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Hooki i narzędzia
|
|
51
|
+
|
|
52
|
+
Są reeksportowane z `react-intlayer`, więc możesz importować je bezpośrednio z `react-native-intlayer`:
|
|
40
53
|
|
|
41
|
-
|
|
54
|
+
| Eksport | Opis |
|
|
55
|
+
| ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
|
|
56
|
+
| `useIntlayer` | Dostęp do zlokalizowanej zawartości dla klucza słownika. |
|
|
57
|
+
| `useLocale` | Odczyt i zmiana bieżącej lokalizacji. |
|
|
58
|
+
| `useDictionary`, `useDictionaryAsync`, `useDictionaryDynamic`, `useLoadDynamic` | Ładowanie zawartości słownika na różne sposoby. |
|
|
59
|
+
| `useI18n` | Hook kompatybilny z i18next. |
|
|
60
|
+
| `t` | Pomocnik tłumaczenia inline. |
|
|
61
|
+
| `getIntlayer`, `getDictionary` | Imperatywne gettery zawartości. |
|
|
62
|
+
| `localeCookie`, `localeInStorage`, `setLocaleCookie`, `setLocaleInStorage`, `useLocaleCookie`, `useLocaleStorage` | Pomocniki trwałości lokalizacji. |
|
|
42
63
|
|
|
43
64
|
```tsx
|
|
44
|
-
import "react-native-intlayer";
|
|
65
|
+
import { useIntlayer, useLocale, t } from "react-native-intlayer";
|
|
45
66
|
```
|
|
46
67
|
|
|
47
68
|
### Polyfill
|
|
@@ -50,10 +71,25 @@ import "react-native-intlayer";
|
|
|
50
71
|
| ------------------ | ----------------------------------------------------------------------------------- |
|
|
51
72
|
| `intlayerPolyfill` | Funkcja, która stosuje niezbędne polyfille dla React Native, aby wspierać Intlayer. |
|
|
52
73
|
|
|
53
|
-
|
|
74
|
+
```tsx
|
|
75
|
+
import { intlayerPolyfill } from "react-native-intlayer";
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
> Polyfill jest stosowany automatycznie podczas importowania `IntlayerProvider`. Wywołaj `intlayerPolyfill` ręcznie tylko wtedy, gdy potrzebujesz polyfilli przed zamontowaniem providera.
|
|
79
|
+
|
|
80
|
+
### Formatery
|
|
81
|
+
|
|
82
|
+
Hooki do formatowania liczb, dat i inne oparte na Intl są dostępne z podścieżki `/format`:
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
import { useNumber, useDate } from "react-native-intlayer/format";
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Renderowanie Markdown i HTML
|
|
54
89
|
|
|
55
90
|
```tsx
|
|
56
|
-
import "react-native-intlayer";
|
|
91
|
+
import { MarkdownProvider } from "react-native-intlayer/markdown";
|
|
92
|
+
import { HTMLProvider } from "react-native-intlayer/html";
|
|
57
93
|
```
|
|
58
94
|
|
|
59
95
|
### Konfiguracja Metro
|
|
@@ -66,8 +102,6 @@ Pakiet `react-native-intlayer` dostarcza narzędzia do konfiguracji Metro, aby z
|
|
|
66
102
|
| `configMetroIntlayerSync` | Funkcja synchroniczna, która scala konfigurację Metro bez przygotowywania zasobów Intlayer. |
|
|
67
103
|
| `exclusionList` | Tworzy wzorzec RegExp dla blockList Metro, aby wykluczyć pliki zawartości z bundla. |
|
|
68
104
|
|
|
69
|
-
Import:
|
|
70
|
-
|
|
71
105
|
```tsx
|
|
72
|
-
import "react-native-intlayer/metro";
|
|
106
|
+
import { configMetroIntlayer } from "react-native-intlayer/metro";
|
|
73
107
|
```
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-06-18
|
|
3
|
-
updatedAt: 2026-
|
|
3
|
+
updatedAt: 2026-06-25
|
|
4
4
|
title: "Expo + React Native i18n - Guia completo para traduzir seu aplicativo"
|
|
5
5
|
description: "Sem mais i18next. O guia 2026 para criar uma aplicação Expo + React Native multilíngue (i18n). Traduza com agentes de IA e otimize o tamanho do bundle, SEO e desempenho."
|
|
6
6
|
keywords:
|
|
@@ -17,12 +17,18 @@ slugs:
|
|
|
17
17
|
applicationTemplate: https://github.com/aymericzip/intlayer-react-native-template
|
|
18
18
|
applicationShowcase: https://intlayer-react-native.vercel.app
|
|
19
19
|
history:
|
|
20
|
+
- version: 9.0.0
|
|
21
|
+
date: 2026-06-25
|
|
22
|
+
changes: "Importar providers e hooks diretamente de react-native-intlayer; react-intlayer não é mais necessário como dependência direta"
|
|
20
23
|
- version: 8.9.0
|
|
21
24
|
date: 2026-05-04
|
|
22
25
|
changes: "Atualizar o uso da API useIntlayer do Solid para acesso direto a propriedades"
|
|
23
26
|
- version: 7.5.9
|
|
24
27
|
date: 2025-12-30
|
|
25
28
|
changes: "Adicionar comando init"
|
|
29
|
+
- version: 6.1.6
|
|
30
|
+
date: 2025-10-02
|
|
31
|
+
changes: "Adicionar seção de debug"
|
|
26
32
|
- version: 5.5.10
|
|
27
33
|
date: 2025-06-29
|
|
28
34
|
changes: "Histórico inicial"
|
|
@@ -37,7 +43,7 @@ author: aymericzip
|
|
|
37
43
|
<iframe
|
|
38
44
|
src="https://ide.intlayer.org/aymericzip/intlayer-react-native-template?file=intlayer.config.ts"
|
|
39
45
|
className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
|
|
40
|
-
title="Demo CodeSandbox - Intlayer"
|
|
46
|
+
title="Demo CodeSandbox - Como Internacionalizar sua aplicação usando Intlayer"
|
|
41
47
|
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
|
42
48
|
loading="lazy"
|
|
43
49
|
/>
|
|
@@ -56,7 +62,9 @@ author: aymericzip
|
|
|
56
62
|
</Tab>
|
|
57
63
|
</Tabs>
|
|
58
64
|
|
|
59
|
-
|
|
65
|
+
## Índice
|
|
66
|
+
|
|
67
|
+
<TOC/>
|
|
60
68
|
|
|
61
69
|
## Por que Intlayer em vez de alternativas?
|
|
62
70
|
|
|
@@ -78,7 +86,7 @@ Definir o escopo do conteúdo do seu aplicativo **facilita a manutenção** de a
|
|
|
78
86
|
|
|
79
87
|
<Accordion header="Agente de IA">
|
|
80
88
|
|
|
81
|
-
A co-localização de conteúdo **reduz o contexto necessário** pelos Large Language Models (LLMs). O Intlayer também vem com um conjunto de ferramentas, como uma **CLI** para testar traduções ausentes
|
|
89
|
+
A co-localização de conteúdo **reduz o contexto necessário** pelos Large Language Models (LLMs). O Intlayer também vem com um conjunto de ferramentas, como uma **CLI** para testar traduções ausentes, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/mcp_server.md)**, e **[habilidades do agente](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/agent_skills.md)**, para tornar a experiência do desenvolvedor (DX) ainda mais tranquila para os agentes de IA.
|
|
82
90
|
|
|
83
91
|
</Accordion>
|
|
84
92
|
|
|
@@ -96,7 +104,7 @@ Conectar arquivos JSON enormes a componentes pode levar a problemas de desempenh
|
|
|
96
104
|
|
|
97
105
|
<Accordion header="Escalonamento sem nenhum desenvolvedor">
|
|
98
106
|
|
|
99
|
-
Mais do que apenas uma solução i18n, o Intlayer fornece um **[editor visual]
|
|
107
|
+
Mais do que apenas uma solução i18n, o Intlayer fornece um **[editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_visual_editor.md) auto-hospedado** e um **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_CMS.md)** para ajudá-lo a gerenciar seu conteúdo multilíngue em **tempo real**, facilitando a colaboração com tradutores, redatores e outros membros da equipe. O conteúdo pode ser armazenado local e/ou remotamente.
|
|
100
108
|
|
|
101
109
|
</Accordion>
|
|
102
110
|
|
|
@@ -109,52 +117,9 @@ Em vez de carregar arquivos JSON enormes em suas páginas, carregue apenas o con
|
|
|
109
117
|
|
|
110
118
|
<Steps>
|
|
111
119
|
|
|
112
|
-
<Step number={1} title="
|
|
120
|
+
<Step number={1} title="Instalar Dependências">
|
|
113
121
|
|
|
114
|
-
Consulte [Modelo de
|
|
115
|
-
|
|
116
|
-
No seu projeto React Native, instale os seguintes pacotes:
|
|
117
|
-
|
|
118
|
-
```bash packageManager="npm"
|
|
119
|
-
npm instalar camada interna reagir-intlayer
|
|
120
|
-
npm install --save-dev react-native-intlayer
|
|
121
|
-
inicialização da camada interna npx
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
```bash packageManager="pnpm"
|
|
125
|
-
pnpm adicionar camada interna reagir-intlayer
|
|
126
|
-
pnpm add --save-dev react-native-intlayer
|
|
127
|
-
inicialização da camada interna pnpm
|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
```bash packageManager="yarn"
|
|
131
|
-
fio adicionar camada interna reagir camada interna
|
|
132
|
-
fio adicionar --save-dev reagir-nativo-intlayer
|
|
133
|
-
inicialização da camada interna do fio
|
|
134
|
-
```
|
|
135
|
-
|
|
136
|
-
```bash packageManager="bun"
|
|
137
|
-
bun adicionar camada interna reagir-intlayer
|
|
138
|
-
bun add --dev react-native-intlayer
|
|
139
|
-
bun x intlayer init
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
### Pacotes
|
|
143
|
-
|
|
144
|
-
- **camada interna**
|
|
145
|
-
O kit de ferramentas principal i18n para configuração, conteúdo de dicionário, geração de tipos e comandos CLI.
|
|
146
|
-
|
|
147
|
-
- **react-intlayer**
|
|
148
|
-
Integração React que fornece os provedores de contexto e ganchos React que você usará no React Native para obter e alternar localidades.
|
|
149
|
-
|
|
150
|
-
- **react-native-intlayer**
|
|
151
|
-
Integração React Native que fornece o plugin Metro para integração do Intlayer com o empacotador React Native.
|
|
152
|
-
|
|
153
|
-
---
|
|
154
|
-
|
|
155
|
-
</Step>
|
|
156
|
-
|
|
157
|
-
<Step number={2} title="Instalar Dependências">
|
|
122
|
+
Consulte o [Modelo de Aplicativo](https://github.com/aymericzip/intlayer-react-native-template) no GitHub.
|
|
158
123
|
|
|
159
124
|
No seu projeto React Native, instale os seguintes pacotes:
|
|
160
125
|
|
|
@@ -174,28 +139,24 @@ yarn dlx intlayer-cli init --interactive
|
|
|
174
139
|
bunx intlayer-cli init --interactive
|
|
175
140
|
```
|
|
176
141
|
|
|
177
|
-
>
|
|
142
|
+
> A flag `--interactive` é opcional. Use `intlayer-cli init` se você for um agente de IA.
|
|
178
143
|
|
|
179
144
|
> Este comando detectará seu ambiente e instalará os pacotes necessários. Por exemplo:
|
|
180
145
|
|
|
181
146
|
```bash packageManager="npm"
|
|
182
|
-
npm install intlayer react-intlayer
|
|
183
|
-
npm install --save-dev react-native-intlayer
|
|
147
|
+
npm install intlayer react-native-intlayer
|
|
184
148
|
```
|
|
185
149
|
|
|
186
150
|
```bash packageManager="pnpm"
|
|
187
|
-
pnpm add intlayer react-intlayer
|
|
188
|
-
pnpm add --save-dev react-native-intlayer
|
|
151
|
+
pnpm add intlayer react-native-intlayer
|
|
189
152
|
```
|
|
190
153
|
|
|
191
154
|
```bash packageManager="yarn"
|
|
192
|
-
yarn add intlayer react-intlayer
|
|
193
|
-
yarn add --save-dev react-native-intlayer
|
|
155
|
+
yarn add intlayer react-native-intlayer
|
|
194
156
|
```
|
|
195
157
|
|
|
196
158
|
```bash packageManager="bun"
|
|
197
|
-
bun add intlayer react-intlayer
|
|
198
|
-
bun add --dev react-native-intlayer
|
|
159
|
+
bun add intlayer react-native-intlayer
|
|
199
160
|
```
|
|
200
161
|
|
|
201
162
|
### Pacotes
|
|
@@ -203,17 +164,14 @@ bun add --dev react-native-intlayer
|
|
|
203
164
|
- **intlayer**
|
|
204
165
|
O kit de ferramentas i18n principal para configuração, conteúdo do dicionário, geração de tipos e comandos CLI.
|
|
205
166
|
|
|
206
|
-
- **react-intlayer**
|
|
207
|
-
Integração React que fornece os provedores de contexto e hooks React que você usará no React Native para obter e trocar localidades.
|
|
208
|
-
|
|
209
167
|
- **react-native-intlayer**
|
|
210
|
-
Integração React Native que fornece o plugin Metro para integrar o Intlayer com o bundler do React Native.
|
|
168
|
+
Integração React Native que fornece os provedores de contexto e hooks React que você usará para obter e trocar localidades, os polyfills do React Native e o plugin Metro para integrar o Intlayer com o bundler do React Native. Reexporta tudo de `react-intlayer`, portanto você só precisa deste único pacote em um aplicativo React Native.
|
|
211
169
|
|
|
212
170
|
---
|
|
213
171
|
|
|
214
172
|
</Step>
|
|
215
173
|
|
|
216
|
-
<Step number={
|
|
174
|
+
<Step number={2} title="Criar uma Configuração Intlayer">
|
|
217
175
|
|
|
218
176
|
Na raiz do seu projeto (ou em qualquer lugar conveniente), crie um arquivo de **configuração do Intlayer**. Pode ser algo assim:
|
|
219
177
|
|
|
@@ -247,7 +205,7 @@ Dentro desta configuração, você pode:
|
|
|
247
205
|
|
|
248
206
|
</Step>
|
|
249
207
|
|
|
250
|
-
<Step number={
|
|
208
|
+
<Step number={3} title="Adicione o plugin Metro">
|
|
251
209
|
|
|
252
210
|
Metro é um empacotador para React Native. É o empacotador padrão para projetos React Native criados com o comando `react-native init`. Para usar o Intlayer com o Metro, você precisa adicionar o plugin ao seu arquivo `metro.config.js`:
|
|
253
211
|
|
|
@@ -262,13 +220,18 @@ module.exports = (async () => {
|
|
|
262
220
|
})();
|
|
263
221
|
```
|
|
264
222
|
|
|
223
|
+
> Nota: `configMetroIntlayer` é uma função que retorna uma promise. Use `configMetroIntlayerSync` se quiser usá-la de forma síncrona ou evitar IIFE (Immediately Invoked Function Expression).
|
|
224
|
+
> Nota: `configMetroIntlayerSync` não permite construir dicionários intlayer no início do servidor
|
|
225
|
+
|
|
265
226
|
</Step>
|
|
266
227
|
|
|
267
|
-
<Step number={
|
|
228
|
+
<Step number={4} title="Adicione o provedor Intlayer">
|
|
229
|
+
|
|
230
|
+
Para manter sincronizada a linguagem do usuário em toda a sua aplicação, você precisa envolver seu componente raiz com o componente `IntlayerProvider` do `react-native-intlayer`.
|
|
268
231
|
|
|
269
|
-
|
|
232
|
+
> Sempre importe de `react-native-intlayer`. Seu `IntlayerProvider` inclui polyfills para a API web usada pelo Intlayer, e o pacote reexporta todos os hooks e utilitários de `react-intlayer`.
|
|
270
233
|
|
|
271
|
-
|
|
234
|
+
Além disso, você precisa adicionar a função `intlayerPolyfill` ao seu arquivo `index.js` para garantir que o Intlayer funcione corretamente.
|
|
272
235
|
|
|
273
236
|
```tsx fileName="app/_layout.tsx" codeFormat={["typescript", "esm"]}
|
|
274
237
|
import { Stack } from "expo-router";
|
|
@@ -293,7 +256,7 @@ export default RootLayout;
|
|
|
293
256
|
|
|
294
257
|
</Step>
|
|
295
258
|
|
|
296
|
-
<Step number={
|
|
259
|
+
<Step number={5} title="Declare Seu Conteúdo">
|
|
297
260
|
|
|
298
261
|
Crie arquivos de **declaração de conteúdo** em qualquer lugar do seu projeto (comumente dentro de `src/`), usando qualquer um dos formatos de extensão que o Intlayer suporta:
|
|
299
262
|
|
|
@@ -364,7 +327,7 @@ export default homeScreenContent;
|
|
|
364
327
|
|
|
365
328
|
</Step>
|
|
366
329
|
|
|
367
|
-
<Step number={
|
|
330
|
+
<Step number={6} title="Use o Intlayer em Seus Componentes">
|
|
368
331
|
|
|
369
332
|
Use o hook `useIntlayer` em componentes filhos para obter conteúdo localizado.
|
|
370
333
|
|
|
@@ -372,7 +335,7 @@ Use o hook `useIntlayer` em componentes filhos para obter conteúdo localizado.
|
|
|
372
335
|
|
|
373
336
|
```tsx fileName="app/(tabs)/index.tsx" codeFormat={["typescript", "esm"]}
|
|
374
337
|
import { Image, StyleSheet, Platform } from "react-native";
|
|
375
|
-
import { useIntlayer } from "intlayer";
|
|
338
|
+
import { useIntlayer } from "react-native-intlayer";
|
|
376
339
|
import { HelloWave } from "@/components/HelloWave";
|
|
377
340
|
import ParallaxScrollView from "@/components/ParallaxScrollView";
|
|
378
341
|
import { ThemedText } from "@/components/ThemedText";
|
|
@@ -419,7 +382,7 @@ export default HomeScreen;
|
|
|
419
382
|
|
|
420
383
|
</Step>
|
|
421
384
|
|
|
422
|
-
<Step number={
|
|
385
|
+
<Step number={7} title="Alterar o Locale do App" isOptional={true}>
|
|
423
386
|
|
|
424
387
|
Para trocar os locales dentro dos seus componentes, você pode usar o método `setLocale` do hook `useLocale`:
|
|
425
388
|
|
|
@@ -427,7 +390,7 @@ Para trocar os locales dentro dos seus componentes, você pode usar o método `s
|
|
|
427
390
|
import { type FC } from "react";
|
|
428
391
|
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
|
|
429
392
|
import { getLocaleName } from "intlayer";
|
|
430
|
-
import { useLocale } from "react-intlayer";
|
|
393
|
+
import { useLocale } from "react-native-intlayer";
|
|
431
394
|
|
|
432
395
|
export const LocaleSwitcher: FC = () => {
|
|
433
396
|
const { setLocale, availableLocales } = useLocale();
|
|
@@ -504,7 +467,7 @@ Isto é o que habilita funcionalidades como:
|
|
|
504
467
|
Para evitar o commit de arquivos gerados automaticamente pelo Intlayer, adicione o seguinte ao seu `.gitignore`:
|
|
505
468
|
|
|
506
469
|
```bash
|
|
507
|
-
#
|
|
470
|
+
# Ignorar os arquivos gerados pelo Intlayer
|
|
508
471
|
.intlayer
|
|
509
472
|
```
|
|
510
473
|
|
|
@@ -545,7 +508,7 @@ Intlayer tem como alvo principal a Web Intl API; no React Native você deve incl
|
|
|
545
508
|
|
|
546
509
|
Checklist:
|
|
547
510
|
|
|
548
|
-
- Use as últimas versões de `intlayer
|
|
511
|
+
- Use as últimas versões de `intlayer` e `react-native-intlayer`.
|
|
549
512
|
- Ative o polyfill do Intlayer.
|
|
550
513
|
- Se você usar `getLocaleName` ou outros utilitários baseados em Intl-API, importe esses polyfills cedo (por exemplo em `index.js` ou `App.tsx`):
|
|
551
514
|
|