React i18next Trans组件链接后文本缺失问题求助

问题出在你的国际化JSON配置里的嵌套占位符<0><0>，这会导致i18next解析时错误截断后续文本。以下是两种可行的修复方案：

方案一：简化翻译文本标签 #

修改你的国际化JSON配置，移除<privacy_policy>标签内多余的<0><0>占位符：

{
  "terms_of_use": "Ich stimme die app <privacy_policy></privacy_policy> zu",
  "privacy_policy": "Datenschutzbestimmungen"
}

你的Trans组件代码保持不变即可——因为组件中privacy_policy对应的TouchableOpacity内部已经通过{t('privacy_policy')}加载了链接文本，翻译文本里的<privacy_policy>标签会直接被替换为这个可点击组件，末尾的"zu"就能正常显示。

方案二：通过组件children传递文本 #

如果希望链接文本直接从翻译配置中传递，可以调整组件和JSON：

1. 修改国际化JSON，在<privacy_policy>标签内添加文本占位符：

{
  "terms_of_use": "Ich stimme die app <privacy_policy>{{privacy_policy}}</privacy_policy> zu",
  "privacy_policy": "Datenschutzbestimmungen"
}

2. 更新Trans组件的components配置，让privacy_policy组件接收并渲染children：

<Trans
  i18nKey="login_screen:terms_of_use"
  components={{
    privacy_policy: ({ children }) => (
      <TouchableOpacity
        onPress={() => {
          void Linking.openURL('https:.....');
        }}
      >
        <Link>{children}</Link>
      </TouchableOpacity>
    ),
  }}
/>

两种方案都能解决末尾"zu"缺失的问题，可根据你的实际需求选择。

内容的提问来源于stack exchange，提问作者FCosta