反应本机句柄翻译和语言

Question

你如何处理 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>
    )
}

Answer 1

目前在我们的项目中我们正在使用 this repo :) 请记住，如果您使用的是 Expo

，则需要弹出

Answer 2

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

Answer 3

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

Answer 4

我创建了一个小型库来处理 React 中的翻译。

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

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

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

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 没有任何区别。

反应本机句柄翻译和语言

react native handle translations and languages

javascript

translation

reactjs

react-native