反应原生句柄翻译和语言答案

【问题标题】：react native handle translations and languages反应原生句柄翻译和语言
【发布时间】：2018-05-03 13:21:42
【问题描述】：

React Native 中如何处理翻译？我就是这样做的。是编码风格不好还是性能不好？

Language.js

export default {
    appName: "TestApp",
    welcome: {
        header: {
            title: (l) => {
                switch (l) {
                    case "de": return `germanTitle`
                    case "en": return `englishTitle`
                }
            },
            subtitle: (l) => {
                switch (l) {
                    case "de": return `germanSubtitle`
                    case "en": return `englishSubtitle`
                }
            }
        }
    }
}

然后在我的应用程序中

import language from "./language.js"
let lang = "de"
...

render(){
    return (
        <View>
            <Text>{language.welcome.title(lang)}</Text>
        </View>
    )
}

【问题讨论】：

我觉得这个问题应该在codereview.stackexchange.com

标签： javascript reactjs react-native translation

【解决方案1】：

目前在我们的项目中，我们正在使用this repo :) 请记住，如果您使用 Expo，则需要弹出

【讨论】：

有什么优势？
我想把所有的字符串放在同一个地方。所以当我想翻译一些我不想滚动的东西时
在您的代码中，您通过 Javascript 层处理翻译，使用 repo，您将为每个平台（iOS/Android）使用本机系统，这在性能和清洁方面要好得多代码。
你说服了我。
是的，只需导出带有所有字符串的对象并在其他组件中使用它：) 感谢您接受答案?

【解决方案2】：

尝试使用 I18n。我已经使用它并在很大程度上对其进行了定制。它工作得很好，并提供了您的应用将来可能需要的更多功能。我将尝试在 git 上添加一个使用 I18n 的示例并评论该链接。但现在你可以使用自己的逻辑。

【讨论】：

【解决方案3】：

我在this repo 中使用 Redux 和 AsyncStorage 制作了自己的解决方案，因为我必须更改应用程序中的语言。该实现使用 Expo 作为 CLI，但与 Expo 没有任何关系。这是一个实现的想法，而不是一个现成的库；）。

【讨论】：

【解决方案4】：

我创建了一个小型库，用于在 React 中处理翻译。

https://www.npmjs.com/package/react-littera

您可以简单地在组件中添加一个带有翻译的对象或从文件中导入它。

这是一个使用类组件的示例

import React from "react";
import { Text } from "react-native";

import { withLittera } from "react-littera";

// Regular JS object with your translations. 
// Can also be placed in another file and just simply imported here.
const translations = {
    title: {
        en_US: "This is a title",
        pl_PL: "To jest tytuł",
        de_DE: "Dies ist ein Titel"
    },
    subtitle: {
        en_US: "This is a subtitle",
        pl_PL: "To jest podtytuł",
        de_DE: "Dies ist ein Untertitel"
    }
};

class ExampleComponent extends React.Component {
    render() {
        const { translated } = this.props; // An object called "translated" is passed with props.

        // This is how you display a translated string.
        return <Text>{translated.title}</Text>;
    }
}

export default withLittera(translation)(ExampleComponent); // <- Here you pass the translations to the withLittera HOC.

我已经在很多项目中使用了该库，并且它似乎表现良好。请记住使用 LitteraProvider 包装您的应用，并将活动语言值和语言更改回调传递给它。

PS。该库实际上是用于 React，但它似乎与 React Native 没有任何区别。

【讨论】：