react native i18n插值：跨组件trans

_pengliang2025-01-26 11:55

想要实现动态插值以及插入元素，如下效果

这个找了蛮久的，官网的例子在我这无效，所以网上找了比较久，没能理解用法。最后是在 github issue 中看到别人的用法，自己理解下实现出来了，所以这里记录下。

例如vue的写法，直接使用插槽：

html 复制代码

     <i18n-t keypath="auth.agreement" tag="p">
        <template #appName>
          {{ $t('app.name') }}
        </template>
        <template #termsService>
          <b> {{ $t('auth.termsService') }} </b>
        </template>
        <template #privacyPolicy>
          <b> {{ $t('auth.privacyPolicy') }} </b>
        </template>
      </i18n-t>

React Native 的写法：

html 复制代码

  <Trans
        values={{
          name: 'ddd',
          count: 22,
        }}
        i18nKey="userMessagesUnread"
        parent={Text}
        components={{
          1: <Text style={{ color: 'red', fontWeight: 'bold' }}></Text>,
          5: <Text style={{ color: 'blue' }}></Text>,
        }}
      ></Trans>

附上官网：https://react.i18next.com/legacy-v9/trans-component

说真的，这个官网看了很久没看明白这个 Trans 组件，用法完全不同，不确定是不是版本的问题。

json 复制代码

    "react": "18.3.1",
    "react-dom": "18.3.1",
    "i18next": "^24.2.1",
    "react-i18next": "^15.4.0",