React Native迁移至FormatJS后如何重新添加locale-data

Hey there! Let me break down how to migrate your old react-intl locale data setup to the modern FormatJS ecosystem—this is way simpler than you might think!

First: Update Your Dependencies #

First off, the react-intl/locale-data packages you were using are deprecated in the latest FormatJS stack (which includes react-intl v3+). You won’t need those anymore.

If you’re still on an older version of react-intl, start by upgrading to the latest stable version:

npm install react-intl@latest

Ditch addLocaleData Entirely #

The big news: you can completely remove that addLocaleData([...fr, ...en]) call and the imports for react-intl/locale-data/fr/en.

Modern FormatJS relies directly on the browser’s native Intl API for locale handling. Most modern browsers support this API out of the box, but if you need to support older environments (like IE11) or less common locales, you’ll need to add polyfills instead.

Adding Polyfills (If Needed) #

If you need broad compatibility, install these FormatJS polyfill packages:

npm install @formatjs/intl-pluralrules @formatjs/intl-relativetimeformat @formatjs/intl-getcanonicallocales

Then import and register them in your app’s entry file (like index.js):

// Polyfill core Intl functionality
import '@formatjs/intl-getcanonicallocales/polyfill';

// Polyfill plural rules + locale data for en/fr
import '@formatjs/intl-pluralrules/polyfill';
import '@formatjs/intl-pluralrules/locale-data/fr';
import '@formatjs/intl-pluralrules/locale-data/en';

// Polyfill relative time formatting + locale data for en/fr
import '@formatjs/intl-relativetimeformat/polyfill';
import '@formatjs/intl-relativetimeformat/locale-data/fr';
import '@formatjs/intl-relativetimeformat/locale-data/en';

These polyfills automatically register the necessary locale data behind the scenes—no manual addLocaleData-style calls required.

Setting Up Your Locale in the App #

Now, all you need to do is pass your desired locale and translation messages to the IntlProvider (just like before, minus the locale data setup):

import { IntlProvider } from 'react-intl';
import { useState } from 'react';

// Import your actual translation message files (same as before)
import messagesEn from './locales/en.json';
import messagesFr from './locales/fr.json';

function App() {
  const [currentLocale, setCurrentLocale] = useState('en');
  const currentMessages = currentLocale === 'fr' ? messagesFr : messagesEn;

  return (
    <IntlProvider locale={currentLocale} messages={currentMessages}>
      {/* Your app components go here */}
    </IntlProvider>
  );
}

export default App;

Key Takeaways #

• No more manual locale data registration: The addLocaleData method is gone—browser Intl API or polyfills handle this now.
• Polyfills are optional: Only use them if you need to support environments without full native Intl support.
• Focus stays on your translation messages: Your actual string translations work exactly like they did before; only the locale data setup has changed.

内容的提问来源于stack exchange，提问作者E.D