0

事实是，在某些情况下，这个问题又回到了我身上。在这种情况下，我想从另一个文件（用于代码清理）声明 LOCAL CONFIG OBJECT，但不知道该怎么做。请问我能解释一下吗？

我目前的情况是文件很长且不可读。我想从另一个文件中获取“本地配置对象”：

  • 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;
4

2 回答 2

0

要创建新的配置文件，您只需要创建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;
于 2022-01-30T13:18:29.987 回答
0

您需要声明 localConfig 来实现 react-native-calendar 的原因很少。但是我可以通过您的问题猜测您想要使用本地值，例如更改日历的语言或根据您正在开发应用程序的区域设置一周的第一天。为此，您唯一需要做的就是将 props 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 文件中找到

节点-模块-> react-native-calendar-> 自述文件

在那里，您还可以找到一些方便的方法，了解如何在不创建额外文件的情况下本地化您的 react 本机日历。

于 2020-11-25T19:12:12.500 回答