WedX - журнал о программировании и компьютерных науках

Есть ли способ правильно отформатировать с помощью React-Intl, где я не получаю эту ошибку?

Я работаю над приложением React Native, где мне нужно, чтобы post_date, который я получаю от стороннего API, не отображался как: 2019-05-10 11:26:39, а вместо этого отображался: x many days ago.

Я попытался установить React-Intl, а затем реализовать его в App.js вот так:

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import {
  createBottomTabNavigator,
  createStackNavigator,
  createAppContainer
} from "react-navigation";
import { Provider } from "react-redux";
import { IntlProvider } from "react-intl";
import store from "./store";
import AuthScreen from "./screens/AuthScreen";
import WelcomeScreen from "./screens/WelcomeScreen";
import MapScreen from "./screens/MapScreen";
import DeckScreen from "./screens/DeckScreen";
import SettingsScreen from "./screens/SettingsScreen";
import ReviewScreen from "./screens/ReviewScreen";

const MainNavigator = createAppContainer(
  createBottomTabNavigator({
    welcome: WelcomeScreen,
    auth: AuthScreen,
    main: {
      screen: createBottomTabNavigator({
        map: MapScreen,
        deck: DeckScreen,
        review: {
          screen: createStackNavigator({
            review: ReviewScreen,
            settings: SettingsScreen
          })
        }
      })
    }
  })
);

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <View style={styles.container}>
          <IntlProvider locale="en">
            <MainNavigator />
          </IntlProvider>
        </View>
      </Provider>
    );
  }
}

А в моем DeckScreen.js вот так:

import React, { Component } from "react";
import { View, Text, Platform } from "react-native";
import { MapView } from "expo";
import { connect } from "react-redux";
import { Card, Button } from "react-native-elements";
// import Moment from "react-moment";
import { FormattedRelative } from "react-intl";
import Swipe from "../components/Swipe";
import * as actions from "../actions";

class DeckScreen extends Component {
  renderCard(job) {
    return (
      <Card title={job.title}>
        <View style={{ height: 300 }}>
          <MapView
            scrollEnabled={false}
            style={{ flex: 1 }}
            cacheEnabled={Platform.OS === "android" ? true : false}
          />
        </View>
        <View style={styles.detailWrapper}>
          <Text>{job.company.id}</Text>
          <FormattedRelative value={job.post_date.toString()} />
        </View>
        <Text>
          {job.description.replace(/<span>/g, "").replace(/<\/span>/g, "")}
        </Text>
      </Card>
    );
  }

Я чувствую, что я ближе к получению того, что хочу, с React-Intl, чем с Momentjs, но я получаю эту ошибку:

console.error: «[React Intl] Ошибка форматирования относительного времени. RangeError: значение даты, предоставленное IntlRelativeFormat#format(), не находится в допустимом диапазоне».

Мой код неправильно отформатирован? У кого-нибудь есть опыт реализации FormattedRelative из React-Intl?

Я знаю, что могу использовать toDateString(), чтобы избавиться от временной метки 2019-05-10 11:26:39, но когда я пытаюсь реализовать ее через <FormattedRelative value={job.post_date.toDateString()} />, я продолжаю получать то же сообщение об ошибке.

14.05.2019

Ответы:


1

Вы должны преобразовать формат даты в соответствующую миллисекунду и передать в реквизиты значения FormattedRelative.

// convert 2019-05-10 11:26:39. date to millisecond, for example see below code.

 var postDate    = Date.now() - (1000 * 60 * 60 * 24); 
 <ul>
     <li><FormattedRelative value={postDate} /></li>
</ul>

Выход:

yesterday
14.05.2019
  • Я видел, что в документации я должен использовать post_date, так как это одно из свойств API, которое я использую в приложении. 14.05.2019

  • 2

    Я долго боролся с подобной проблемой после обновления до React-Intl 3.0. Вот оболочка, которую я сделал с помощью Руководство по обновлению V3

    import React from 'react';
    import { FormattedRelativeTime } from 'react-intl';
    import { selectUnit } from '@formatjs/intl-utils';
    
    type Props = {
      value: Date | string | number
    };
    
    export default function RelativeTimeWrapper(props: Props) {
      const select = selectUnit(new Date(props.value));
    
      return (
        <FormattedRelativeTime {...props} {...select} />
      );
    }
    
    04.02.2020
  • Обертка, которую вы сделали? Или вы просто скопировали его из репозитория formatjs? github.com/formatjs/formatjs/blob/ 13.03.2020
  • Новые материалы

    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..


    Для любых предложений по сайту: [email protected]