如何通过I18Next传递参数？

Question

我想翻译我的颜色，但是我是如何做的。

const Item = memo(({ color, index, lastIndex, translateName, style, activeColor, onPress }: IColorItem) => {
  return (
      <Text>{translateName}</Text>
  )
  // @ts-ignore
}, isEq);

const Colors = ({ colors, style, activeColor, onPress }: IColors) => {
  const { t } = useTranslation();
  const renderItem: ListRenderItem<ColorsType> = ({ item, index }) => (
    <Item
      color={item}
      translateName={t('colors.color', { color: item })}
      index={index}
      style={style}
      activeColor={activeColor}
      lastIndex={colors.length - 1}
      onPress={onPress}
    />
  )
  return (
    <View style={s.container}>
      <FlatList
        data={colors as ColorsType[]}
        renderItem={renderItem}
        style={s.flatList}
        keyExtractor={(item, i) => i.toString()}
        horizontal
        showsHorizontalScrollIndicator={false}
      />
    </View>
  )
}

transl.json

  "colors": {
     "color": "{{color, COLORS}}"
  },

没什么可用。我怎么说“红色” = ...，“蓝色” = ...？

................................................................................. ................................................................................. ....................................................................................

Answer 1

您可以在I18N文档中看到插值：“ noreferrer”> https://www.i18next.com/translation-function.com/translation-function.com/translation-function.com/translation-function. /插值

{
"key": "{{what}} is {{how}}"
}


i18next.t('key', { what: 'i18next', how: 'great' });

Answer 2

您可以使用这种方式：

<Item
      color={item}
      translateName={t('colors.color', { color: 'blue' })}
      index={index}
      style={style}
      activeColor={activeColor}
      lastIndex={colors.length - 1}
      onPress={onPress}
    />

在您的JSON中，

  "colors": {
     "color": "my color is %{color}"
  },

输出应为：我的颜色是蓝色