Блог

Правда в том, что в некоторых случаях эта проблема возвращалась ко мне. В этом случае я хочу объявить ОБЪЕКТ ЛОКАЛЬНОЙ КОНФИГУРАЦИИ из другого файла (для очистки кода), но не знаю, как это сделать. Могу ли я получить объяснение, пожалуйста?

На данный момент моя ситуация такова, что файл очень длинный и нечитаемый. я хочу получить «объект локальной конфигурации» из другого файла:

• объект локальной конфигурации из react-native-calendars выглядит следующим образом:

   import { LocaleConfig } from "react-native-calendars";
  LocaleConfig.locales["fr"] = {
   monthNames: [
     "Janvier",
    "Février",
   "Mars",
   "Avril",
   "Mai",
   "Juin",
   "Juillet",
   "Août",
   "Septembre",
   "Octobre",
   "Novembre",
   "Décembre",
  ],
           monthNamesShort: ["Janv.", "Févr.", "Mars", "Avril", "Mai", "Juin", "Juil.", "Août", 
   "Sept.", "Oct.", 
  "Nov.", "Déc."],
  dayNames: ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
  dayNamesShort: ["shimon.", "Lun.", "Mar.", "Mer.", "Jeu.", "Ven.", "Sam."],
   today: "Aujourd'hui",
    };
   LocaleConfig.defaultLocale = "fr";
   

• весь мой файл с компонентом выглядит так:

   import React, { useEffect, useContext, useState } from "react";
   import { StyleSheet, View } from "react-native";
   import { Agenda } from "react-native-calendars";
   import { CalendarItem } from "../customStyles/CalendarItem";
   import { Context as BookingContext } from "../context/booking-context";
   import { LocaleConfig } from "react-native-calendars";
  
   LocaleConfig.locales["fr"] = {
   monthNames: [
   "Janvier",
   "Février",
   "Mars",
   "Avril",
   "Mai",
   "Juin",
   "Juillet",
   "Août",
   "Septembre",
   "Octobre",
   "Novembre",
   "Décembre",
    ],
    monthNamesShort: ["Janv.", "Févr.", "Mars", "Avril", "Mai", "Juin", "Juil.", "Août", "Sept.", 
   "Oct.", 
     "Nov.", "Déc."],
   dayNames: ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
  dayNamesShort: ["shimon.", "Lun.", "Mar.", "Mer.", "Jeu.", "Ven.", "Sam."],
  today: "Aujourd'hui",
  };
   LocaleConfig.defaultLocale = "fr";
   const UserHistory = () => {
   const { state, getAllMeetings } = useContext(BookingContext);
   const meetings = state.meetings;
   const loadMonthItems = month => {
   console.log("ffdffffffffffffffffffffffffffffffffffffffffffffff", month);
   };
   useEffect(() => {
    getAllMeetings();
  }, []);
  
  const renderItem = item => {
   return <CalendarItem item={item} />;
   };
  
   return (
   <View style={{ flex: 1 }}>
       <Agenda
           items={meetings}
           loadItemsForMonth={loadMonthItems}
           // selected={moment().format("YYYY-MM-DD")}
           selected={"2020-11-22"}
           renderItem={renderItem}
           theme={{
               "stylesheet.agenda.list": {
                   container: {
                       flexDirection: "column",
                       borderColor: "yellow",
                       borderWidth: 1,
                   },
                   dayNum: {
                       fontSize: 16,
                       fontWeight: "200",
                   },
                   dayText: {
                       fontSize: 14,
  
                       fontFamily: "heebo",
                       color: "green",
                       backgroundColor: "rgba(0,0,0,0)",
                       marginTop: 0,
                   },
                   day: {
                       width: 63,
                       alignItems: "center",
                       justifyContent: "flex-start",
                       marginTop: 32,
  
                       borderColor: "red",
                       borderWidth: 1,
                   },
                   today: {
                       color: "blue",
                   },
               },
           }}
           style={{
               borderWidth: 3,
               borderColor: "gray",
           }}
       />
     </View>
    );
    };
  
    const styles = StyleSheet.create({});
   export default UserHistory;
   

Существует несколько причин, по которым вам нужно будет объявить localConfig для реализации react-native-calendar. Но я могу догадаться по вашему вопросу, что вы хотите использовать локальные значения, такие как изменение языка календаря или установка первого дня недели в соответствии с регионом, для которого вы разрабатываете приложение. Для этого единственное, что вам нужно сделать, это передать самому компоненту календаря реквизиты monthNames , monthNamesShort , dayNames и dayNamesShort с соответствующими локальными значениями, которые вы хотите отобразить. Например, если вы хотите изменить язык календаря на немецкий, не нужно объявлять файл localConfig, вместо этого вам просто нужно передать свои локальные значения внутри компонента календаря, например

 <Calendar
    monthNames: [ 'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'July', 'August', 'September', 'Oktober', 'November', 'Dezember' ],
    monthNamesShort: [ 'Jan.', 'Feb.', 'Mär.', 'Apr.', 'Mai', 'Jun.', 'Jul.', 'Aug.', 'Sept.', 'Okt.', 'Nov.', 'Dez.' ],
    dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
    dayNamesShort: ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.'],
    onDateChange:{yourFunction}
/>
 

Для любого другого локального материала, который вы хотите использовать, просто передайте его прямо в качестве реквизита компоненту календаря, процесс прост.
Полное объяснение этого можно найти в файле README в разделе

node- modules -> react-native-calendar -> readme

Там вы также можете найти несколько удобных подходов к локализации вашего календаря react native без создания дополнительных файлов.

Чтобы создать новый конфигурационный файл, вам просто нужно создать ts или js файл расширения с функцией. И вызовите эту функцию в файле, где вы используете календарь.

Если я правильно понял ваш вопрос, вы хотите иметь что-то вроде этого

 import {LocaleConfig} from 'react-native-calendars';

const defineLocale = () => {
  LocaleConfig.locales['ru'] = {
    monthNames: [
      'Январь',
      'Февраль',
      'Март',
      'Апрель',
      'Май',
      'Июнь',
      'Июль',
      'Август',
      'Сентябрь',
      'Октябрь',
      'Ноябрь',
      'Декабрь'
    ],
    monthNamesShort: ['Янв.', 'Фев.', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль.', 'Авг.', 'Сент.', 'Окт.', 'Нояб.', 'Дек.'],
    dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
    dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
    today: "Aujourd'hui"
  };
  LocaleConfig.locales.en = LocaleConfig.locales[''];
};

export default defineLocale;