React Native 如何使用i18n动态转换对象数组的属性?

rbl8hiat  于 2023-01-14  发布在  React
关注(0)|答案(1)|浏览(106)

我有一个对象数组,每个对象有2个属性(标题和副标题),我希望这2个属性根据视频有不同类型的翻译,所以每个视频必须有3种不同类型的语言翻译和不同的字符串。
例如,第一个对象具有title:“猫”,副标题:“purr”和翻译,例如意大利语标题:“gatto”,副标题:“苗”,第二个对象有标题:“狗”,副标题:“woof”和它现在的意大利语翻译。
我使用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}>{__(T.cardText.title)}</Text>
          <Text style={appStyles.cardUnderText}>
            {__(T.cardText.description)}
          </Text>
        </View>
      </View>
    </View>
  );
}

以下是我的翻译:

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

db2dz4w81#

有很多方法可以做到这一点,但最简单的方法是用您的语言和翻译构建一个对象。对象中的一个级别是您的语言,另一个级别是公共键。如下所示:

const messages = {
  cat: {
    english: 'cat',
    italian: 'gatto',
  },
  purr: {
    english: 'purr',
    italian: 'miao',
  },
}

这样,您就可以在任何地方使用messages[key][language](您可以构建对象,使其也是messages[language][key],这由您决定)。
在您的项目中简化此操作的一种方法是:构建一个翻译上下文,在内存中保存用户的语言,并返回一个只有{ key: value }的对象(即{ purr: 'miao' }。如果您想了解更多,我可以添加它。

相关问题