如何用i18n动态翻译对象数组的属性？

1. 重构翻译配置文件 #

按视频唯一标识（比如ID或名称）组织翻译项，让每个视频的标题、副标题对应独立的翻译键，示例如下：

英文配置（en.js） #

export default {
  messages: {
    welcome: 'TAKE A TOUR OF THE BASILICA OF ST. FRANCIS',
    interact: 'Insert € 2.00, touch the screen',
    insert: 'You inserted :',
  },
  videos: {
    cat: {
      title: 'cat',
      subtitle: 'purr'
    },
    dog: {
      title: 'dog',
      subtitle: 'woof'
    },
    custodian_welcome: {
      title: "CUSTODIAN'S WELCOME SPEECH",
      description: 'bla in english'
    }
  }
};

意大利语配置（it.js） #

export default {
  messages: {
    welcome: 'FAI UN TOUR NELLA BASILICA DI SAN FRANCESCO',
    interact: 'Inserisci € 2,00, tocca lo schermo',
    insert: 'Hai inserito :',
  },
  videos: {
    cat: {
      title: 'gatto',
      subtitle: 'miao'
    },
    dog: {
      title: 'cane',
      subtitle: 'bau'
    },
    custodian_welcome: {
      title: 'DISCORSO DI BENVENUTO DEL CUSTODE',
      description: 'bla in italiano'
    }
  }
};

2. 调整视频数组结构 #

给每个视频对象添加唯一标识（比如id），用来匹配翻译配置里的对应键：

const videos = [
  {
    id: 'cat',
    thumb: require('./cat-thumb.png'),
    viewedTimes: 0
  },
  {
    id: 'dog',
    thumb: require('./dog-thumb.png'),
    viewedTimes: 1
  },
  {
    id: 'custodian_welcome',
    thumb: require('./welcome-thumb.png'),
    viewedTimes: 0
  }
];

3. 修改Card组件动态获取翻译 #

把固定的翻译键改成根据视频ID动态拼接，利用已有的i18n翻译函数（__）获取对应语言文本：

export default function Card({video}: Props) {
  return (
    <View style={appStyles.card}>
      <View
        style={
          video.viewedTimes > 0
            ? appStyles.cardOverlay
            : appStyles.cardNoOverlay
        }>
        <View style={appStyles.containerImage}>
          <Image source={video.thumb} style={appStyles.cardImage} />
          <View style={appStyles.containerPlayIcon}>
            <Play
              name="controller-play"
              size={35}
              color={'white'}
              style={appStyles.playIcon}
            />
          </View>
        </View>

        <View style={appStyles.underContainer}>
          {/* 动态获取视频标题翻译 */}
          <Text style={appStyles.cardText}>{__(`videos.${video.id}.title`)}</Text>
          {/* 兼容subtitle/description两种字段 */}
          <Text style={appStyles.cardUnderText}>
            {__(`videos.${video.id}.subtitle`) || __(`videos.${video.id}.description`)}
          </Text>
        </View>
      </View>
    </View>
  );
}

核心逻辑说明 #

• 每个视频的唯一标识是翻译匹配的核心，必须和配置文件里的键严格对应
• 翻译配置按videos.[视频标识].title/subtitle层级组织，适配i18n的键路径解析规则
• 切换语言时，i18n会自动加载对应语言的配置文件，组件将自动渲染对应翻译文本

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