अपने प्रश्न को पूछें और दस्तावेज़ का सारांश प्राप्त करें, इस पृष्ठ और आपके चुने हुए AI प्रदाता का उपयोग करके
अपने पसंदीदा AI एसिस्टेंट में Intlayer MCP सर्वर को एकीकृत करके आप सभी दस्तावेज़ को सीधे ChatGPT, DeepSeek, Cursor, VSCode से प्राप्त कर सकते हैं।
MCP सर्वर दस्तावेज़ देखेंइस पृष्ठ की सामग्री एक AI द्वारा अनुवादित की गई है।
अंग्रेजी में मूल सामग्री के अंतिम संस्करण देखेंअगर आपके पास इस दस्तावेज़ को सुधारने के लिए कोई विचार है, तो कृपया GitHub पर एक पुल अनुरोध सबमिट करके योगदान देने में संकोच न करें।
दस्तावेज़ के लिए GitHub लिंकदस्तावेज़ का Markdown को क्लिपबोर्ड पर कॉपी करें
Intlayer और React Native के साथ अंतरराष्ट्रीयकरण (i18n) शुरू करना
GitHub पर एप्लिकेशन टेम्पलेट देखें।
Intlayer क्या है?
Intlayer एक नवोन्मेषी, ओपन-सोर्स अंतरराष्ट्रीयकरण (i18n) लाइब्रेरी है जो आधुनिक अनुप्रयोगों में बहुभाषी समर्थन को सरल बनाती है। यह कई JavaScript/TypeScript वातावरणों में काम करता है, जिसमें React Native भी शामिल है ( react-intlayer पैकेज के माध्यम से)।
Intlayer के साथ, आप कर सकते हैं:
- घोषणात्मक शब्दकोशों का उपयोग करके अनुवादों का आसानी से प्रबंधन करें जो कंपोनेंट स्तर पर होते हैं।
- स्वचालित रूप से उत्पन्न प्रकारों के साथ TypeScript समर्थन सुनिश्चित करें।
- सामग्री को गतिशील रूप से स्थानीयकृत करें, जिसमें UI स्ट्रिंग्स शामिल हैं (और React वेब के लिए, यह HTML मेटाडेटा आदि को भी स्थानीयकृत कर सकता है)।
- उन्नत सुविधाओं का लाभ उठाएं, जैसे गतिशील स्थानीय पहचान और स्विचिंग।
चरण 1: निर्भरता स्थापित करें
अपने React Native प्रोजेक्ट से, निम्नलिखित पैकेज स्थापित करें:
कोड को क्लिपबोर्ड पर कॉपी करें
bash packageManager="npm"npm install intlayer react-intlayernpm install --save-dev react-native-intlayer
पैकेज
intlayer
कॉन्फ़िगरेशन, शब्दकोश सामग्री, प्रकारों का निर्माण, और CLI कमांड के लिए मूल i18n टूलकिट।react-intlayer
React एकीकरण जो कॉन्टेक्स्ट प्रदाताओं और React हुक्स प्रदान करता है, जिन्हें आप React Native में स्थानीयकरण प्राप्त करने और स्विच करने के लिए उपयोग करेंगे।react-native-intlayer
React Native एकीकरण जो Intlayer को React Native बंडलर के साथ एकीकृत करने के लिए Metro प्लगइन प्रदान करता है।
चरण 2: Intlayer कॉन्फ़िग बनाएं
अपने प्रोजेक्ट रूट (या कहीं भी सुविधाजनक) में, एक Intlayer कॉन्फ़िग फ़ाइल बनाएं। यह कुछ इस प्रकार दिख सकती है:
कोड को क्लिपबोर्ड पर कॉपी करें
/** * यदि Locales प्रकार उपलब्ध नहीं है, तो अपने tsconfig.json में moduleResolution को "bundler" पर सेट करने का प्रयास करें */import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [ Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, // ... अपनी आवश्यकतानुसार अन्य स्थानीय भाषाएँ जोड़ें ], defaultLocale: Locales.ENGLISH, },};export default config;
इस कॉन्फ़िग में, आप कर सकते हैं:
- अपने समर्थित स्थानीय भाषाओं की सूची कॉन्फ़िगर करें।
- एक डिफ़ॉल्ट स्थानीय भाषा सेट करें।
- बाद में, आप अधिक उन्नत विकल्प जोड़ सकते हैं (जैसे, लॉग्स, कस्टम कंटेंट डायरेक्टरीज़, आदि)।
- अधिक जानकारी के लिए Intlayer कॉन्फ़िगरेशन दस्तावेज़ देखें।
चरण 3: मेट्रो प्लगइन जोड़ें
मेट्रो React Native के लिए एक बंडलर है। यह react-native init कमांड से बनाए गए React Native प्रोजेक्ट्स के लिए डिफ़ॉल्ट बंडलर है। Intlayer को मेट्रो के साथ उपयोग करने के लिए, आपको अपने metro.config.js फ़ाइल में प्लगइन जोड़ना होगा:
कोड को क्लिपबोर्ड पर कॉपी करें
const { getDefaultConfig } = require("expo/metro-config");const { configMetroIntlayer } = require("react-native-intlayer/metro");module.exports = (async () => { const defaultConfig = getDefaultConfig(__dirname); return await configMetroIntlayer(defaultConfig);})();
चरण 4: Intlayer प्रदाता जोड़ें
अपने एप्लिकेशन में उपयोगकर्ता भाषा को सिंक्रनाइज़ रखने के लिए, आपको अपने रूट कॉम्पोनेंट को react-intlayer से IntlayerProvider कॉम्पोनेंट के साथ रैप करना होगा।
साथ ही, आपको यह सुनिश्चित करने के लिए कि Intlayer सही ढंग से काम कर सके, अपनी index.js फ़ाइल में intlayerPolyfill फ़ंक्शन जोड़ना होगा।
कोड को क्लिपबोर्ड पर कॉपी करें
import { Stack } from "expo-router";import { getLocales } from "expo-localization";import { IntlayerProviderContent } from "react-intlayer";import { intlayerPolyfill } from "react-native-intlayer";import { type FC } from "react";intlayerPolyfill();const getDeviceLocale = () => getLocales()[0]?.languageTag;const RootLayout: FC = () => { return ( <IntlayerProviderContent defaultLocale={getDeviceLocale()}> <Stack> <Stack.Screen name="(tabs)" options={{ headerShown: false }} /> </Stack> </IntlayerProviderContent> );};export default RootLayout;
चरण 5: अपनी सामग्री घोषित करें
प्रोजेक्ट में कहीं भी content declaration फाइलें बनाएं (आमतौर पर src/ के अंदर), Intlayer द्वारा समर्थित किसी भी एक्सटेंशन फॉर्मेट का उपयोग करते हुए:
- .content.json
- .content.ts
- .content.tsx
- .content.js
- .content.jsx
- .content.mjs
- .content.mjx
- .content.cjs
- .content.cjx
- आदि।
उदाहरण (React Native के लिए TSX नोड्स के साथ TypeScript):
कोड को क्लिपबोर्ड पर कॉपी करें
import { t, type Dictionary } from "intlayer";import type { ReactNode } from "react";/** * हमारे "app" डोमेन के लिए कंटेंट शब्दकोश */import { t, type Dictionary } from "intlayer";const homeScreenContent = { key: "home-screen", content: { title: t({ en: "Welcome!", fr: "Bienvenue!", es: "¡Bienvenido!", }), },} satisfies Dictionary;export default homeScreenContent;
सामग्री घोषणाओं के विवरण के लिए, देखें Intlayer की सामग्री दस्तावेज़।
चरण 4: अपने घटकों में Intlayer का उपयोग करें
स्थानीयकृत सामग्री प्राप्त करने के लिए चाइल्ड कॉम्पोनेंट्स में useIntlayer हुक का उपयोग करें।
उदाहरण
कोड को क्लिपबोर्ड पर कॉपी करें
import { Image, StyleSheet, Platform } from "react-native";import { useIntlayer } from "react-intlayer";import { HelloWave } from "@/components/HelloWave";import ParallaxScrollView from "@/components/ParallaxScrollView";import { ThemedText } from "@/components/ThemedText";import { ThemedView } from "@/components/ThemedView";import { type FC } from "react";const HomeScreen = (): FC => { const { title, steps } = useIntlayer("home-screen"); return ( <ParallaxScrollView headerBackgroundColor={{ light: "#A1CEDC", dark: "#1D3D47" }} headerImage={ <Image source={require("@/assets/images/partial-react-logo.png")} style={styles.reactLogo} /> } > <ThemedView style={styles.titleContainer}> <ThemedText type="title">{title}</ThemedText> <HelloWave /> </ThemedView> </ParallaxScrollView> );};const styles = StyleSheet.create({ titleContainer: { flexDirection: "row", // पंक्ति में तत्वों को व्यवस्थित करें alignItems: "center", // केंद्र में संरेखित करें gap: 8, // तत्वों के बीच 8 की दूरी },});export default HomeScreen;
जब आप content.someKey का उपयोग स्ट्रिंग-आधारित प्रॉप्स में करते हैं (जैसे, किसी बटन के title या Text कंपोनेंट के children में), तो वास्तविक स्ट्रिंग प्राप्त करने के लिए content.someKey.value कॉल करें।
(वैकल्पिक) चरण 5: ऐप का लोकल बदलें
अपने कंपोनेंट्स के भीतर से लोकल बदलने के लिए, आप useLocale हुक के setLocale मेथड का उपयोग कर सकते हैं:
कोड को क्लिपबोर्ड पर कॉपी करें
import { type FC } from "react";import { View, Text, TouchableOpacity, StyleSheet } from "react-native";import { getLocaleName } from "intlayer";import { useLocale } from "react-intlayer";export const LocaleSwitcher: FC = () => { const { setLocale, availableLocales } = useLocale(); return ( <View style={styles.container}> {availableLocales.map((locale) => ( <TouchableOpacity key={locale} style={styles.button} onPress={() => setLocale(locale)} > <Text style={styles.text}>{getLocaleName(locale)}</Text> </TouchableOpacity> ))} </View> );};const styles = StyleSheet.create({ container: { flexDirection: "row", justifyContent: "center", alignItems: "center", gap: 8, }, button: { paddingVertical: 6, paddingHorizontal: 12, borderRadius: 6, backgroundColor: "#ddd", }, text: { fontSize: 14, fontWeight: "500", color: "#333", },});
यह उन सभी कंपोनेंट्स को पुनः रेंडर करता है जो Intlayer सामग्री का उपयोग करते हैं, अब नए लोकल के लिए अनुवाद दिखाते हुए।
अधिक जानकारी के लिए useLocale दस्तावेज़ देखें।
TypeScript कॉन्फ़िगर करें (यदि आप TypeScript का उपयोग करते हैं)
Intlayer ऑटोकम्प्लीशन को बेहतर बनाने और अनुवाद त्रुटियों को पकड़ने के लिए एक छिपे हुए फ़ोल्डर (डिफ़ॉल्ट रूप से .intlayer) में टाइप परिभाषाएँ उत्पन्न करता है:
कोड को क्लिपबोर्ड पर कॉपी करें
// tsconfig.json{ // ... आपका मौजूदा TS कॉन्फ़िग "include": [ "src", // आपका स्रोत कोड ".intlayer/types/**/*.ts", // <-- सुनिश्चित करें कि स्वचालित रूप से उत्पन्न प्रकार शामिल हैं // ... जो कुछ भी आप पहले से शामिल करते हैं ],}
यह निम्नलिखित सुविधाओं को सक्षम करता है:
- ऑटोकम्प्लीशन आपके शब्दकोश की कुंजियों के लिए।
- टाइप जांच जो चेतावनी देता है यदि आप किसी अस्तित्वहीन कुंजी तक पहुँचते हैं या प्रकार मेल नहीं खाते हैं।
गिट कॉन्फ़िगरेशन
Intlayer द्वारा स्वचालित रूप से उत्पन्न फ़ाइलों को कमिट करने से बचने के लिए, अपनी .gitignore में निम्नलिखित जोड़ें:
कोड को क्लिपबोर्ड पर कॉपी करें
# Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें.intlayer
VS कोड एक्सटेंशन
Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप आधिकारिक Intlayer VS Code एक्सटेंशन इंस्टॉल कर सकते हैं।
VS कोड मार्केटप्लेस से इंस्टॉल करें
यह एक्सटेंशन प्रदान करता है:
- अनुवाद कुंजियों के लिए ऑटोकम्प्लीशन।
- गायब अनुवादों के लिए रीयल-टाइम त्रुटि पहचान।
- अनुवादित सामग्री के इनलाइन पूर्वावलोकन।
- अनुवादों को आसानी से बनाने और अपडेट करने के लिए त्वरित क्रियाएं।
एक्सटेंशन का उपयोग कैसे करें, इसके लिए अधिक जानकारी के लिए देखें Intlayer VS कोड एक्सटेंशन दस्तावेज़।
आगे बढ़ें
- विज़ुअल एडिटर: अनुवादों को दृश्य रूप से प्रबंधित करने के लिए Intlayer विज़ुअल एडिटर का उपयोग करें।
- CMS एकीकरण: आप अपने शब्दकोश की सामग्री को एक CMS से बाहरी रूप से प्रबंधित और प्राप्त भी कर सकते हैं।
- CLI कमांड्स: ऐसे कार्यों के लिए Intlayer CLI का अन्वेषण करें जैसे अनुवाद निकालना या गुम हुए कुंजियों की जांच करना।
Intlayer के माध्यम से पूरी तरह से सशक्त i18n के साथ अपने React Native ऐप्स का निर्माण करें!
दस्तावेज़ इतिहास
- 5.5.10 - 2025-06-29: प्रारंभिक इतिहास