如何在 react-native 中使用 i18n-js 将组件渲染为参数？答案

【问题标题】：How to render component as a param using i18n-js in react-native?如何在 react-native 中使用 i18n-js 将组件渲染为参数？
【发布时间】：2021-09-13 20:30:47
【问题描述】：

我使用i18n-js 进行语言环境和翻译。我正在尝试使用插值渲染一个 react-native 组件。

以下是代码供参考，

// Translate function (exposed using custom hooks)
const translate = useCallback((key, config) => i18n.t(key, config), []);

// locale key with variables to be interpolated
"tnc_text": "Accept {{topUpTnC}} and {{dealsTnC}} to proceed"

// Code which uses translate
<Text>
  {translate(
    'tnc_text', {
      topUpTnC: <Text
        style={{color: 'blue'}}
        onPress={() => Linking.openURL('https://google.com')}>
        Top-Up Terms and Conditions*
      </Text>,
      dealsTnC: <Text
        style={{color: 'blue'}}
        onPress={() => Linking.openURL('https://example.com')}>
        Deals Terms and Conditions
      </Text>,
  })}
</Text>

我期待这样的事情：

接受Top-Up Terms and Conditions* 和Deals Terms and Conditions 继续

但相反，我得到了这个：

接受[object Object]和[object Object]继续

在文档中找不到任何内容。有没有办法用 i18n-js 中的组件替换变量？

【问题讨论】：

标签： javascript reactjs react-native localization i18n-js

【解决方案1】：

我有同样的问题，但还没有找到答案......

也许 Trans-Component 可以提供帮助：

https://react.i18next.com/latest/trans-component

编辑：这可能是一个很好的解释 React-i18n Trans Component with translations that contain HTML tags not working

第二次编辑： 我可以使用以下代码解决问题：

// render
<Trans i18nKey="yourTranslationKey" components={{ link: <Text onPress={() => console.log('do something')}}} /> }} />

// translationFile
{...
 "yourTranslationKey": "Please <link>Click me</link>",
...}

在github 上找到它:)

This 是关于它的官方文档。

【讨论】：