javascript - how can I translate an array with react-native-i18n? - Stack Overflow

admin管理员组

文章数量:1289565

I have my translation that goes like this:

en.json

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

and my page that it's like this:

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 is supposed to be an array of translated strings but instead I get

missing "en.days" translation

from the console. The weird thing is that if I save the translation and trigger the hot reload the translation work just fine like here. Also the translation is present in the file screenshot

I have my translation that goes like this:

en.json

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

and my page that it's like this:

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 is supposed to be an array of translated strings but instead I get

missing "en.days" translation

from the console. The weird thing is that if I save the translation and trigger the hot reload the translation work just fine like here. Also the translation is present in the file screenshot

• javascript
• react-native

Share Improve this question Follow asked May 16, 2017 at 17:08 jayceejaycee 31133 silver badges1313 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

The best way of doing it is to declare:

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

And then refer to it:

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

Assuming you want to display all the days (for instance in calendar), you go:

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

In your i18n config, be sure to set returnObjects: true

example:

i18n
  ...
  .init({
    lng: "en",
    fallbackLng: "en",
    backend: {
      loadPath: `...`,
    },
    returnObjects: true,
    interpolation: {
      escapeValue: false,
    },
  });

and then your en json file would look like this...

{
  ...
  "days": ["Mon", "Tues", "Wed", "Thurs", "Fri", "Sat", "Sun"]
}

本文标签： javascripthow can I translate an array with reactnativei18nStack Overflow