在 React Native 中使用 moment.js 無法載入語系檔案

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

moment.js 是很常見的日期時間 library，友善的 API 與極佳的執行效率是它的兩大賣點。例如 (new Date()).getFullYear()，如果使用 moment.js 我可以只寫 moment().get('year')，可讀性增強許多。

問題

React Native 0.29.x 預設使用 ES6，並支援 import 語法。問題出在如果遵照官方網站的說明去載入語系檔，會發生找不到模組 (cannot find module) 的錯誤。推測可能是 moment.js 從 ES5 移植到 ES6 沒有轉換完全。

1
2
3

import moment from 'moment';
moment.locale('zh-tw');
console.log(moment.months());

解法

GitHub 上已經有人回報相關錯誤，參考大专栏在 React Native 中使用 moment.js 無法載入語系檔案ta-url="aHR0cHM6Ly9naXRodWIuY29tL2ZhY2Vib29rL3JlYWN0LW5hdGl2ZS9pc3N1ZXMvMTYyOQ==" title="https://github.com/facebook/react-native/issues/1629">facebook/react-native#1629 得出以下解法。

1
2
3
4

import moment from 'moment';
import momentLocale from 'moment/locale/zh-tw'; // 多這一行
moment.updateLocale('zh-tw', momentLocale); // 改這一行
console.log(moment.months());

原理是使用 ES6 的語法將語系檔案手動載入之後使用 updateLocale 手動覆寫。issue 中的 locale([locale_name], [locale_hash]) 已經被 deprecated，必須改用 updateLocale。