为i18n应用程序创建语言切换器

问题描述

我正在学习如何在应用程序上实现Lingui（i18n）。一切都已设置，但是我想知道如何创建语言开关，以便在应用程序的语言目录之间进行切换。

这是我的 index.js 文件

import React,{ useEffect } from "react";
import { render } from "react-dom";
import App from "./App";

import { I18nProvider } from "@lingui/react";
import { i18n } from "@lingui/core";
import { defaultLocale,dynamicActivate } from "./i18n";

const Translation = () => {
    useEffect(() => {
        dynamicActivate(defaultLocale);
    },[]);

    return (
        <I18nProvider i18n={i18n}>
            <App />
        </I18nProvider>
    );
};

render(<Translation />,document.getElementById("root"));

我的 App.js 文件

import "./App.css";
import { Trans } from "@lingui/macro";

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <h1>
                    <Trans>HELLOO</Trans>
                </h1>
                <p>
                    <Trans>it's me.</Trans>

                </p>
            </header>
        </div>
    );
}

export default App;

和 i18n.ts 文件

import { i18n } from '@lingui/core';

export const locales = {
  en: "English",es: "Spanish",fr: "french",};

export const defaultLocale = "fr";

/**
* We do a dynamic import of just the catalog that we need
* @param locale any locale string
*/

export async function dynamicActivate(locale: string) {
  const { messages } = await import(`./locales/${locale}/messages`)
  i18n.load(locale,messages)
  i18n.activate(locale)
}

每次我指定es，en或fr defaultLocale时都会更改语言，但是我希望有一个语言按钮可以通过select在页面上自动进行更改。

ex：“导出const defaultLocale =“ fr”;“ （在i18n.ts中）

解决方法

您可以使用i18n.activate()方法切换到所需的语言环境。

i18n对象API在@js-lingui/core中定义。

如果以前未加载语言环境，则还需要加载它。

对于您的项目，可以使用已经创建的便捷的dynamicActivate()函数。

您的组件输出将如下所示：

<div>
    <Trans>Switch to:</Trans>
    <button
        onClick={() => dynamicActivate('en')}>
        English
    </button>
    <button
        onClick={() => dynamicActivate('fr')}>
        Français
    </button>
    <button
        onClick={() => dynamicActivate('es')}>
        Espanol
    </button>
</div>

它将呈现3个按钮[English] [Français] [Espanol]，每个按钮将加载并激活所需的语言环境。

最佳做法是将按钮标题保留为自己的语言，以便用户找到他们理解的语言。

除上述内容外，突出显示当前选择的语言并禁用按钮可能很有意义。

我正在使用useLingui()获取表示当前语言的i18n.locale，并在下面的一个按钮上设置了disabled标志。

这是LanguageSelector.js组件的完整代码，您可以在App.js中以<LanguageSelector />的形式使用它。祝您的项目/学习顺利。

import React from "react"
import { useLingui } from "@lingui/react"
import { Trans } from "@lingui/macro";
import { dynamicActivate } from "./i18n";

const LanguageSelector = () => {
    const { i18n } = useLingui();

    return <div>
            <Trans>Switch to:</Trans>
            <button
                onClick={() => dynamicActivate('en')}
                disabled={i18n.locale === 'en'}>
                English
            </button>
            <button
                onClick={() => dynamicActivate('fr')}
                disabled={i18n.locale === 'fr'}>
                Français
            </button>
            <button
                onClick={() => dynamicActivate('es')}
                disabled={i18n.locale === 'es'}>
                Espanol
            </button>
    </div>
};

export default LanguageSelector

已更新：

此外，您可以将所选语言环境持久保存到浏览器的LocalStorage

每次dynamicActivate()被调用时，我们应该保存语言环境：

const LOCAL_STORAGE_KEY = 'lang';

function dynamicActivate(locale: string) {
  // existing code here
  window.localStorage.setItem(LOCAL_STORAGE_KEY,locale);
}

显然，@lingui/detect-locale library可以很好地检测来自包括LocalStorage在内的许多来源的语言环境。

在这里可以将其应用：

import { detect,fromUrl,fromStorage,fromNavigator } from '@lingui/detect-locale';

// existing code from i18n.ts

export const locales = {
  en: "English",es: "Spanish",fr: "French",};

export const defaultLocale = "en";

const LOCAL_STORAGE_KEY = 'lang';

// checks that detected locale is available
const isLocaleValid = (locale: string | null) => `${locale}` in locales;

// returns locale 
export function getLocale() {
  const detectedLocale = detect(
    fromUrl("lang"),// for example http://localhost:3000/?lang=es
    fromStorage(LOCAL_STORAGE_KEY),fromNavigator(),// from system settings
    () => defaultLocale,);

  return isLocaleValid(detectedLocale) ? detectedLocale : defaultLocale;
}

最后一步是呼叫getLocale()而不是一直使用defaultLocale。

    useEffect(() => {
        // With this method we dynamically load the catalogs
        dynamicActivate(getLocale());
    },[]);