使用i18n-js插值React组件时显示[object Object]的解决方法求助

默认情况下，i18n-js会将所有插值值转为字符串，导致传入React元素时显示为[object Object]。要实现带样式的插值，需要自定义interpolate方法来处理React元素的渲染逻辑，具体步骤如下：

1. 重写i18n的interpolate方法 #

初始化i18n实例时，替换默认的插值逻辑，让它能识别并保留React元素：

import { I18n } from 'i18n-js';
import React from 'react';

const i18n = new I18n({
  en: {
    profile: {
      spend: "spend more than %{amount}"
    }
  }
});

// 自定义插值逻辑，支持React元素
i18n.interpolate = (_, message, options) => {
  // 按占位符拆分文案为文本片段和占位符key
  const segments = message.split(/%\{(\w+)\}/);
  
  return segments.map((segment, idx) => {
    // 奇数位是占位符key，替换为对应的值（React元素或普通文本）
    if (idx % 2 === 1) {
      const placeholderKey = segment;
      return options[placeholderKey] ?? `%{${placeholderKey}}`;
    }
    // 偶数位是普通文本，直接返回
    return segment;
  });
};

2. 在组件中使用带样式的插值 #

调整原文案（移除多余的$，让插值元素包含样式和内容），然后正常调用i18n.t：

import React from 'react';
import { Text } from 'react-native';

const MemberCard = () => {
  return (
    <Text>
      {i18n.t('profile.spend', {
        amount: <Text style={{ color: 'red' }}>$100</Text>
      })}
    </Text>
  );
};

export default MemberCard;

核心原理 #

自定义的interpolate方法将原文案拆分为文本片段和占位符，遍历过程中把占位符替换为传入的React元素，最终返回一个由文本和React元素组成的数组——React可以直接渲染这种混合数组，从而实现带样式的插值效果。

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