react native i18n插值:跨组件trans

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

这个找了蛮久的,官网的例子在我这无效,所以网上找了比较久,没能理解用法。最后是在 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",
相关推荐
10年前端老司机25 分钟前
Promise 常见面试题(持续更新中)
前端·javascript
WebDesign_Mu3 小时前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
噢,我明白了3 小时前
前端js 常见算法面试题目详解
前端·javascript·算法
学编程的小虎3 小时前
用 Python + Vue3 打造超炫酷音乐播放器:网易云歌单爬取 + Three.js 波形可视化
开发语言·javascript·python
做好一个小前端4 小时前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html
mapbar_front4 小时前
react项目开发—关于代码架构/规范探讨
前端·react.js
勤奋菲菲5 小时前
Vue3+Three.js:requestAnimationFrame的详细介绍
开发语言·javascript·three.js·前端可视化
需要兼职养活自己5 小时前
react高阶组件
前端·react.js
前端开发呀5 小时前
无所不能的uniapp拦截器【三】uni-app 拦截器核心流程解析
前端·javascript·微信小程序
今天周二5 小时前
vite 将react老项目中的没有兼容处理的写法转成兼容性写法
react.js