在 i18n-js React Native 中为翻译字符串添加样式

Question

我在 React Native 应用程序中使用 i18n-js 进行翻译。但是我的翻译无法获得任何样式，例如不同的颜色、粗体等。

这是我的 en.js:

import {Text} from "react-native";

  const highlightText = (string) =>
    string.split(" ").map((word, i) => (
      <Text key={i}>
        <Text style={{ backgroundColor: "#ECEAFF", color: "#5F5C7E" }}>
          {word}
        </Text>
      </Text>
    ));

const en = {
   testTranslation:`This Text has some styling to it: ${highlightText("<h1>Hello</h1>")} isn't that pretty?`,

我在屏幕上使用这样的翻译：

import i18n from "i18n-js";
import { de } from "../../../locales/de";
import { en } from "../../../locales/en";
import { fr } from "../../../locales/fr";

i18n.fallbacks = true;
i18n.translations = { en, de, fr };

...
 <Text>
     {i18n.t("testTranslation")}
 </Text>

结果是这样的：

This Text has some styling to it: [object Object] isn't that pretty?

非常感谢任何有关如何设置文本样式的帮助！

Answer 1

您可以使用类似这样的语法

在翻译文件中创建 3 个字符串。例子

在翻译文件中

str1: 'this is"
str2: 'bold'
str3: 'copy'

现在你可以做类似的事情

<>
  <Text>{i18n.t(str1)}</Text>
  <Text className="boldStyle">{i18n.t(str2)}</Text>
  <Text>{i18n.t(str3)}</Text>
<>

同样还有其他模式。但这很干净而且很小

在 i18n-js React Native 中为翻译字符串添加样式

Add styling to translation string in i18n-js React Native

javascript

translation

react-native

i18n-js