ios - 有没有办法在我没有收到此错误的情况下使用 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()} />，我继续收到相同的错误消息。

标签： iosreactjsreact-native

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} /> ); }

ios - 有没有办法在我没有收到此错误的情况下使用 React-Intl 正确格式化？

问题描述

解决方案

推荐阅读