[英]State changes in the react native functional component
I want the Calender changes its language depends on the user language (there are 3 languages can be chosen in the app, English Spanish and Italian), English is the default language of the calendar library.我希望日历根据用户语言更改其语言(应用程序中可以选择 3 种语言,英语西班牙语和意大利语),英语是日历库的默认语言。 Btw the library uses moment.js to use different languages.顺便说一句,该库使用 moment.js 来使用不同的语言。 But the calender language is not changed when I change the user language.但是当我更改用户语言时,日历语言没有改变。 I need to help to fix this我需要帮忙解决这个问题
import { Moment } from 'moment';
import React, { FunctionComponent, useContext, useEffect } from 'react';
import { NETWORK_ONLY, useQuery } from 'relay-hooks';
import { AuthenticationContext } from '../providers/authentication/AuthenticationProvider';
import CalendarStrip from 'react-native-calendar-strip';
import moment from 'moment';
import USER_BY_ID, {
relayGetUserByIdQuery,
} from '../__generated__/relayGetUserByIdQuery.graphql';
interface Props {
selectedDate: Date | Moment;
setSelectedDate: React.Dispatch<React.SetStateAction<Date | Moment>>;
}
const WeeklyCalendar: FunctionComponent<Props> = (props) => {
const { selectedDate, setSelectedDate } = props;
const { userData, refreshQuery } = useContext(AuthenticationContext);
const { data } = useQuery<relayGetUserByIdQuery>(
USER_BY_ID,
{ id: userData?.userId || ''},
{ fetchPolicy: NETWORK_ONLY }
);
// The localization rules are the same as moments for adding localization to react-native-calendar-strip component
useEffect(() => {
refreshQuery();
if (data?.user?.language == 'ES') {
require('moment/locale/es');
}
if (data?.user?.language == 'IT') {
require('moment/locale/it');
}
}, [data?.user?.language])
return (
<CalendarStrip
scrollable
style={{ height: 75 }}
calendarHeaderStyle={{
color: '#3D3D3D',
fontSize: 16,
fontWeight: '500',
}}
dateNumberStyle={{ color: '#3D3D3D' }}
dateNameStyle={{ color: '#3D3D3D' }}
highlightDateNumberStyle={{ color: 'white' }}
highlightDateNameStyle={{ color: 'white' }}
highlightDateContainerStyle={{
borderRadius: 10,
}}
iconContainer={{ flex: 0.1 }}
numDaysInWeek={7}
daySelectionAnimation={{
type: 'background',
duration: 200,
highlightColor: '#2975D6',
}}
selectedDate={selectedDate}
onDateSelected={(date) => setSelectedDate(date)}
/>
);
};
export default WeeklyCalendar;
Please go to your index.js and import the specific "Locale" after the main moment import请 go 到您的 index.js 并在主要时刻导入后导入特定的“Locale”
import 'moment';
import 'moment/locale/fr'; // language must match config
import 'moment/min/locales'
and set you moment with并为你定下时刻
data?.user?.language == 'ES' ? moment.local('ES') : moment.local('IT')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.