React Native中如何通过语言标签获取对应显示语言名称？

方案1：使用原生Intl API（无额外依赖） #

现代JavaScript和React Native环境原生支持ECMAScript的Intl.DisplayNames API，它能自动处理所有标准语言标签（包括带区域的变体，如en-US、zh-CN）到显示名称的映射，完全无需手动维护对照表。

代码示例 #

const getLanguageDisplayName = (langTag) => {
  try {
    // 用目标语言标签本地化显示名称，比如传入'zh-CN'会返回中文名称
    return new Intl.DisplayNames([langTag], { type: 'language' }).of(langTag);
    // 如果要统一用英文显示所有语言名称，替换为：
    // return new Intl.DisplayNames(['en'], { type: 'language' }).of(langTag);
  } catch (error) {
    // 处理不支持的标签，返回原标签作为 fallback
    return langTag;
  }
};

// 测试使用
const inputTags = ['en', 'it', 'zh-CN', 'fr-CA'];
const outputNames = inputTags.map(tag => getLanguageDisplayName(tag));
// 输出（用目标语言本地化）：["English", "Italiano", "中文（中国）", "français (Canada)"]
// 输出（统一英文）：["English", "Italian", "Chinese (China)", "French (Canada)"]

方案2：使用@formatjs/intl-displaynames（兼容旧环境） #

如果你的React Native环境对原生Intl API支持有限，可以使用FormatJS提供的polyfill库，它和原生API用法完全一致，且内置了完整的语言标签映射数据。

安装与使用 #

npm install @formatjs/intl-displaynames

import { DisplayNames } from '@formatjs/intl-displaynames';

const getLanguageDisplayName = (langTag) => {
  try {
    return new DisplayNames(['en'], { type: 'language' }).of(langTag);
  } catch (error) {
    return langTag;
  }
};

这两个方案都能自动适配所有符合ISO规范的语言标签变体，彻底省去手动维护映射表的麻烦。

内容的提问来源于stack exchange，提问作者blarredflunky