react-intl 是一個令人驚嘆的庫,提供 React 元件和 API 來本地化您的應用程序,但它缺少Duration
元件。
如果您想顯示完成1 minute
或5 minutes
之類的事情所需的時間,甚至是一個簡單的計時器0:30
那麼您就不走運了,因為 ECMA 委員會尚未指定 DurationFormat。
該元件提供了一個非常簡單的抽象,適用於 React (DOM)、React Native 和任何其他目標環境,以格式化簡單的持續時間。
npm i --save react-intl-formatted-duration
// Using React DOM
import React from 'react' ;
import FormattedDuration from 'react-intl-formatted-duration' ;
export default MyComponent ( ) {
return < FormattedDuration seconds = { 60 } / >
// will render `1 minute`
}
預設格式僅顯示分鐘和秒。對於更複雜的需求,請檢查自訂格式部分。
預設情況下,輸出文字包含在span
中,您可以指定目標環境中可用的任何元件:
// Using React Native
import React from 'react' ;
import FormattedDuration from 'react-intl-formatted-duration' ;
import { Text } from 'react-native' ;
export default MyComponent ( ) {
return < FormattedDuration seconds = { 60 } textComponent = { Text } / >
// will render `1 minute`
}
// Using styled components
import React from 'react' ;
import FormattedDuration from 'react-intl-formatted-duration' ;
import styled from 'styled-components' ;
const Text = styled . span `` ;
export default MyComponent ( ) {
return < FormattedDuration seconds = { 60 } textComponent = { Text } / >
// will render `1 minute`
}
如果您想要將數字設定為與文字不同的樣式,您可以傳遞valueComponent
< FormattedDuration seconds = { 90 } textComponent = { Text } valueComponent = { Value } / >
// renders
< Value > 1 < / Value> minute< / Text > < Value > 30 < / Value > < Text > seconds < / Text>
擁有不同的元件不僅對於樣式有用。某些語言使用不同的編號系統。例如,日文有全角數字,因此您可能想要渲染10分
而不是10分
,為此您可以使用:
import React from 'react' ;
import { FormattedNumber } from 'react-intl' ;
import FormattedDuration from 'react-intl-formatted-duration' ;
/*
You'll also need to select Japanese locale and configure the IntlProvider to use
`ja-JP-u-nu-fullwide`
Somewhere in you application
import { IntlProvider } from 'react-intl';
locale="ja-JP-u-nu-fullwide"
/>
*/
export default MyComponent ( ) {
return < FormattedDuration seconds = { 600 } textComponent = { Text } valueComponent = { FormattedNumber } / >
// will render `10分`
}
預設情況下,該元件僅呈現分鐘和秒,如果您想顯示小時或天,您可以使用自訂格式:
< FormattedDuration seconds = { 180000 } format = "{days} {hours} {minutes} {seconds}" / >
// will render `2 days 2 hours`
< FormattedDuration seconds = { 180000 } format = "{hours} {minutes} {seconds}" / >
// will render `50 hours`
< FormattedDuration seconds = { 180000 } format = "{minutes} {seconds}" / >
// will render `3000 minutes`
}
秒也是可選的,如果缺少,分鐘將四捨五入到關閉值
< FormattedDuration seconds = { 10 } format = "{minutes}" / >
// will render `0 minutes`
< FormattedDuration seconds = { 30 } format = "{minutes}" / >
// will render `1 minute`
< FormattedDuration seconds = { 70 } format = "{minutes}" / >
// will render `1 minute`
自訂格式本身可以透過傳遞訊息 ID 而不是實際值來本地化
import React from 'react' ;
import FormattedDuration from 'react-intl-formatted-duration' ;
import messages from './messages' ;
export default MyComponent ( ) {
return (
< FormattedDuration
seconds = { 600 }
format = { messages . customFormat . id }
/ >
) ;
}
雖然format
允許選擇要渲染的單元, unitDisplay
允許配置每個單元的渲染方式。
< FormattedDuration seconds = { 60 } unitDisplay = "long" / >
// will render `1 minute`
< FormattedDuration seconds = { 60 } unitDisplay = "short" / >
// will render `1 min`
< FormattedDuration seconds = { 60 } unitDisplay = "narrow" / >
// will render `1m`
import FormattedDuration , { TIMER_FORMAT } from 'react-intl-formatted-duration' ;
export default MyComponent ( ) {
return < FormattedDuration seconds = { 60 } format = { TIMER_FORMAT } / >
// will render `1:00`
}
react-intl-formatted-duration
需要翻譯檔案中包含以下鍵
react-intl-formatted-duration.longFormatting
產生類似1 minute 30 seconds
的預設格式。它使用值{days}
、 {hours}
、 {minutes}
和{seconds}
。例如,您可以將其變更為{minutes} and {seconds}
。react-intl-formatted-duration.duration
上述minutes
和seconds
變數所使用的格式。它使用值{value}
和{unit}
。預設值為{value} {unit}
其中value
是數字, {unit}
是文字單位,例如minute(s)
或second(s)
。react-intl-formatted-duration.timerFormatting
TIMER_FORMAT
的格式化格式,預設為{minutes}:{seconds}
其中兩個值都是填滿的數字,最小長度為2個字符react-intl-formatted-duration.daysUnit
用於格式化天數的字串,預設{value, plural, one {day} other {days}}
react-intl-formatted-duration.hoursUnit
用於格式化小時的字串,預設{value, plural, one {hour} other {hours}}
react-intl-formatted-duration.minutesUnit
用於格式化分鐘的字串,預設{value, plural, one {minute} other {minutes}}
react-intl-formatted-duration.secondsUnit
用於格式化秒的字串,預設{value, plural, one {second} other {seconds}}
daysUnit
、 hoursUnit
、 minutesUnit
、 secondsUnit
的訊息使用 format-js 語法,並且僅在未指定unitDisplay
時使用。
如果您使用react-boilerplate 中的extract-intl
腳本,您可以匯入react-intl-formatted-duration/messages
以自動在翻譯檔案中產生金鑰。
2.x
版本允許使用 format-js 訊息語法的全部功能。您需要做的就是刪除所有按鍵,例如daysSingular
、 dayPlural
,然後簡單地使用具有上述格式的daysUnit
。
版本3.x
具有與版本2.x
完全相同的 API,但完全重寫。您不需要更改您的程式碼。
版本4.x
不會更改版本3.x
的任何預設行為,僅包含新功能。然而,它在內部將intl-unofficial-duration-unit-format
的版本從1.x
提升到3.x
,現在要求Intl.NumberFormat
在全球範圍內可用。如果你已經正確安裝了react-intl
,那麼你很可能不需要更改你的程式碼。