时间戳

首页 > 解决方案 > 只创建一个始终使用 react-i18next 翻译其内容的 Text 组件是不是一个坏主意？

react-native - 只创建一个始终使用 react-i18next 翻译其内容的 Text 组件是不是一个坏主意？

问题描述

在翻译一个小型 RN 应用程序（完成 50%）的过程中，我注意到React Native上的大部分字符串都是通过Text组件显示的。所以我写了下面的类并用它来代替React Native 的 Text：

import {Text as RNText} from 'react-native';
import {useTranslation} from 'react-i18next';

export default ({children, style}) => {
  const {t} = useTranslation();
  if (Array.isArray(children)) {
    const translated = children.map((el) => t(el));
    return <RNText style={style}>{translated}</RNText>;
  }

  const translated = t(children);
  return <RNText style={style}>{translated}</RNText>;
};

这在我的情况下非常有效并且非常实用，以至于我想知道这是否是一个坏主意 - 否则我觉得它会在文档中被引用为一种使用的好方法react-i18next。

我错过了什么吗？

标签： react-nativereact-i18next

解决方案

如果这对你有用，干得好！您绝对应该继续使用该组件。

react-i18next由于多种原因，这种用法可能没有记录在案：

  1. 图书馆最好让用户完全自由地使用它。我希望react-i18next维护者专注于改进翻译方面，而不是使用资源维护这些组件；

  2. 用户自己编写这样一个组件来支持他们的特定用例是微不足道的，就像您所做的那样；

  3. 这样的组件不能处理所有边缘情况，因此在您的代码库中可能存在一些您不使用组件但仍以Text良好的旧方式使用的情况。考虑一个带有一些变量的字符串，您需要将其传递给：

<Text>{t('key', { value: this.state.value })}</Text>

t()许多开发人员可能更喜欢每次重复保留一点额外的详细信息，以换取适合所有边缘情况的更好的标准行为。

推荐阅读