javascript - 如何使用 react-native-i18n 翻译数组？

Question

我的翻译是这样的:

zh.json

{
   "Welcome": "Welcome to react native",
   "days": ["Sun","Mon","Tue","Wed","Thur","Fri","Sat"]
}

我的页面是这样的:

import React, { PropTypes } from 'react';
import { View, Image } from 'react-native';
import i18n from 'react-native-i18n';
import ReactNativeCalendar from 'react-native-calendar';
import translations from '../../translations';
import styles from './styles';

const dayHeadings = i18n.t('days');

[...]

const Calendar = (props) => {
  console.log(dayHeadings);
  return (
    <View>
      <ReactNativeCalendar
        customStyle={styles}
        nextButtonText={nextButton}
        prevButtonText={prevButton}
        dayHeadings={dayHeadings}
        monthNames={monthNames}
        onDateSelect={props.onDateSelect}
        eventDates={props.eventDates}
        showEventIndicators
        showControls
        events={props.events}
        calendarFormat={props.calendarFormat}
      />
      <Legend items={legendItems} />
    </View>
  );
};

dayHeadings 应该是翻译后的字符串数组，但我却得到了

missing "en.days" translation

从控制台。奇怪的是，如果我保存翻译并触发热重载，翻译工作就好了 like here .文件中也有翻译 screenshot

Answer 1

最好的方法是声明:

{
   "Welcome": "Welcome to React Native",
   "days": {
    "sun": "Sun",
    "mon": "Mon",
    "tue": "Tue",
    "wed": "Wed",
    "thu": "Thur",
    "fri": "Fri",
    "sat": "Sat"
  }
}

然后引用它:

I18n.t(['days', 'mon']);

假设您想要显示所有日期(例如在日历中)，您可以:

const dayKeys = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
...
render() {
  return (
    <View>
    {dayKeys.map((key) => <Text>{I18n.t(['days', key])}</Text>)}
    </View>
  )
}