如何在React Native项目中适配Angular格式的国际化翻译文件？

Got it, let's work through this—since you need to reuse those existing Angular translation files in React Native without modifying them, i18next is a great fit here because it’s super flexible with custom translation formats. Here’s a step-by-step solution:

First, install the core libraries:

npm install i18next react-i18next --save
# or with yarn
yarn add i18next react-i18next

i18next expects translations to be structured as { key: "translation text" }, but your files are arrays of objects. Create a utility function to convert them:

// utils/i18nTransformer.js
export const transformTranslationData = (translationArray) => {
  return translationArray.reduce((formattedTranslations, item) => {
    // Clean up Angular's interpolation tags to match i18next syntax
    const cleanedDefinition = item.definition.replace(
      /<ph name="INTERPOLATION"><ex>{{.*?}}<\/ex>({{.*?}})<\/ph>/g,
      '$1'
    );
    formattedTranslations[item.term] = cleanedDefinition;
    return formattedTranslations;
  }, {});
};

This function does two things:

• Converts the array into a key-value object using term as the key
• Strips out Angular's <ph> interpolation wrapper, leaving just {{variable}} which i18next understands natively

Create an i18n configuration file (e.g., src/i18n.js):

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import enRaw from '../translations/en.json';
import deRaw from '../translations/de.json';
import { transformTranslationData } from './utils/i18nTransformer';

// Transform the raw array data to i18next-compatible format
const resources = {
  en: {
    translation: transformTranslationData(enRaw)
  },
  de: {
    translation: transformTranslationData(deRaw)
  }
};

i18n
  .use(initReactI18next) // Connect to react-i18next
  .init({
    resources,
    lng: 'en', // Set your default language
    interpolation: {
      escapeValue: false // React handles XSS protection natively
    }
  });

export default i18n;

Don't forget to import this config in your root App.js or index.js:

import './src/i18n';

Use the useTranslation hook to access translated text and interpolate variables:

import { View, Text, Button } from 'react-native';
import { useTranslation } from 'react-i18next';

const ExampleComponent = ({ alert }) => {
  const { t, i18n } = useTranslation();

  // Function to switch languages
  const switchLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <View>
      <Text>{t('modal.alert.close')}</Text>
      {/* Pass interpolation variables as an object */}
      <Text>{t('has-expired', { alert: { uniqueId: alert.uniqueId } })}</Text>
      
      <Button title="Switch to German" onPress={() => switchLanguage('de')} />
      <Button title="Switch to English" onPress={() => switchLanguage('en')} />
    </View>
  );
};

export default ExampleComponent;

• If your translation files have more complex Angular tags (like pluralization), you can extend the transformTranslationData function to handle those cases (e.g., map Angular plural rules to i18next's pluralization syntax)
• This approach keeps your original translation files intact—no edits needed, perfect for reusing across Angular and React Native

内容的提问来源于stack exchange，提问作者Avinash