State react native 功能組件的變化

Question

我希望日歷根據用戶語言更改其語言（應用程序中可以選擇 3 種語言，英語西班牙語和意大利語），英語是日歷庫的默認語言。 順便說一句，該庫使用 moment.js 來使用不同的語言。 但是當我更改用戶語言時，日歷語言沒有改變。 我需要幫忙解決這個問題

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;

Answer 1

請 go 到您的 index.js 並在主要時刻導入后導入特定的“Locale”

import 'moment';
import 'moment/locale/fr';  // language must match config

Answer 2

import 'moment/min/locales'

並為你定下時刻

data?.user?.language == 'ES' ? moment.local('ES') : moment.local('IT')