如何在react-native中使用i18n-js渲染组件作为参数?

Question

我使用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>

我期待这样的事情:

接受充值条款和条件*和交易条款和条件进行

但是，我得到了这个:

Accept [object object] and [object object] to proceed

在文档中找不到任何内容。是否有一种方法来替换变量与组件在i18n-js?

Answer 1

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

也许跨组件可以帮上忙:

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

编辑:这可能是一个很好的解释React-i18n Trans组件的翻译包含HTML标签不工作

第二个编辑:我可以解以下代码的问题:

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

在github上找到:)

这是关于它的官方文档。