as

Settings
Sign out
Notifications
Alexa
亚马逊应用商店
AWS
文档
Support
Contact Us
My Cases
新手入门
设计和开发
应用发布
参考
支持

react-native-localize

react-native-localize

在本文中,您将学习如何在Vega TV应用中使用react-native-localize程序包。您可以阅读有关Vega SDK中支持的方法的信息。

react-native-localize程序包可帮助您为每位用户创建个性化体验,让您能够:

  1. 处理多种语言
  2. 设置日期和时间格式
  3. 设置货币
  4. 管理其他地区设置

@amazon-devices/react-native-localize库在适用于Vega的React Native (RNK) 应用中使用Localize React Native。该库提供本地化和国际化支持,让您可以根据不同的语言、地区和文化调整应用。

为什么要对电视应用进行本地化?

  • 用户体验: 用户更喜欢能采用其语言并了解其所在地区首选项的应用。
  • 全球影响力: 您可以提升应用对国际市场上更广泛受众的吸引力。
  • 法律合规性: 您可以确保遵守各个地区的法规。

安装

  1. react-native-localize程序包作为依赖项添加到package.json中:

    已复制到剪贴板。

       "dependencies": {
             ...
             "@amazon-devices/react-native-localize": "~2.0.0"
       }
    
  2. getCurrencies导入您的首选组件:

    已复制到剪贴板。

    import { getCurrencies } from '@amazon-devices/react-native-localize';
    
  3. 在项目根目录上运行npm install来安装程序包。

  4. 成功安装后,运行您的Vega项目。

示例

模拟器与设备

react-native-localize程序包中方法针对模拟器的返回值可能与针对设备的返回值不同。例如,模拟器上的getCountry() 方法返回US,但对于设备,返回值基于设备的语言设置。

方法 模拟器 设备
getLocales 相同 相同
getCurrencies 相同 相同
getCountry 固定值 视设备而定
getTimeZone 固定值 视设备而定
getCalendar 固定值 视设备而定

以下是如何使用@amazon-devices/react-native-localize的示例。

已复制到剪贴板。

import { getCurrencies, getLocales } from "@amazon-devices/react-native-localize";

console.log(getLocales());
console.log(getCurrencies());

API参考

getLocales()

根据用户的设备返回区域设置列表。

  1. languageCode
  2. scriptCode
  3. languageTag
  4. isRTL

方法类型

已复制到剪贴板。

type getLocales = () => Array<{
  languageCode: string;
  scriptCode?: string;
  countryCode: string;
  languageTag: string;
  isRTL: boolean;
}>;

可能的输出

local: [
{"languageCode":"af","scriptCode":"","countryCode":"","languageTag":"af","isRTL":"false"},
{"languageCode":"af","scriptCode":"","countryCode":"NA","languageTag":"af-NA","isRTL":"false"},
{"languageCode":"af","scriptCode":"","countryCode":"ZA","languageTag":"af-ZA","isRTL":"false"},
{"languageCode":"agq","scriptCode":"","countryCode":"","languageTag":"agq","isRTL":"false"},
{"languageCode":"agq","scriptCode":"","countryCode":"CM","languageTag":"agq-CM","isRTL":"false"},
{"languageCode":"ak","scriptCode":"","countryCode":"","languageTag":"ak","isRTL":"false"},
{"languageCode":"ak","scriptCode":"","countryCode":"GH","languageTag":"ak-GH","isRTL":"false"},
{"languageCode":"am","scriptCode":"","countryCode":"","languageTag":"am","isRTL":"false"},
{"languageCode":"am","scriptCode":"","countryCode":"ET","languageTag":"am-ET","isRTL":"false"},
{"languageCode":"ar","scriptCode":"","countryCode":"","languageTag":"ar","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"AE","languageTag":"ar-AE","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"BH","languageTag":"ar-BH","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"DJ","languageTag":"ar-DJ","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"DZ","languageTag":"ar-DZ","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"EG","languageTag":"ar-EG","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"EH","languageTag":"ar-EH","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"ER","languageTag":"ar-ER","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"IL","languageTag":"ar-IL","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"IQ","languageTag":"ar-IQ","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"JO","languageTag":"ar-JO","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"KM","languageTag":"ar-KM","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"KW","languageTag":"ar-KW","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"LB","languageTag":"ar-LB","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"LY","languageTag":"ar-LY","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"MA","languageTag":"ar-MA","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"MR","languageTag":"ar-MR","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"OM","languageTag":"ar-OM","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"QA","languageTag":"ar-QA","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"PS","languageTag":"ar-PS","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"SA","languageTag":"ar-SA","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"SD","languageTag":"ar-SD","isRTL":"true"},
{"languageCode":"ar","scriptCode":"","countryCode":"SO","languageTag":"ar-SO","isRTL":"true"}
...

示例

已复制到剪贴板。

import React, {useEffect, useState} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {getLocales} from '@amazon-devices/react-native-localize';

const DeviceLocale= () => {
const [localeInfo, setLocaleInfo] = useState(null);

useEffect(() => {
const locales = getLocales();

if (locales && locales.length > 0) {
const locale = locales[0];
setLocaleInfo({
languageTag: locale.languageTag,
languageCode: locale.languageCode,
countryCode: locale.countryCode,
isRTL: locale.isRTL,
});
}
}, []);

return (
<View style={styles.container}>
<Text style={styles.text}>Locale Information:</Text>
{localeInfo ? (
<View>
<Text style={styles.text}>
Language Tag: {localeInfo.languageTag}
</Text>
<Text style={styles.text}>
Language Code: {localeInfo.languageCode}
</Text>
<Text style={styles.text}>
Country Code: {localeInfo.countryCode}
</Text>
<Text style={styles.text}>
Is RTL: {localeInfo.isRTL ? 'Yes' : 'No'}
</Text>
</View>
) : (
<Text style={styles.text}>Loading locale...</Text>
)}
</View>
);
};

输出

屏幕截图示出模拟器上的输出,显示langauge tag(语言标签)、language code(语言代码)、country code(国家/地区代码)等区域设置信息,以及是否有RTL。

getNumberFormatSettings()

返回数字格式化设置。

方法类型

已复制到剪贴板。

type getNumberFormatSettings = () => {
  decimalSeparator: string;
  groupingSeparator: string;
};

示例

已复制到剪贴板。

import { getNumberFormatSettings } from "@amazon-devices/react-native-localize";

console.log(getNumberFormatSettings());
/* -> {
  decimalSeparator: ".",
  groupingSeparator: ",",
} */

getCurrencies()

返回所有货币的列表。

方法类型

已复制到剪贴板。

type getCurrencies = () => string[];

示例

已复制到剪贴板。

import { getCurrencies } from "@amazon-devices/react-native-localize";

console.log(getCurrencies());
// -> ["EUR", "GBP", "USD"]

可能的输出

Currency: ["XXX","NAD","ZAR","XAF","GHS","ETB","AED","BHD","DJF","DZD","EGP","MAD","ERN","ILS","IQD","JOD","KMF","KWD","LBP","LYD","MRU","OMR","QAR","SAR","SDG","SOS","SSP","SYP","TND","YER","INR","TZS","EUR","AZN","BYN","ZMW","BGN","XOF","BDT","CNY","BAM","RUB","PHP","UGX","USD","IRR","CZK","GBP","DKK","KES","CHF","BTN","XCD","AUD","BBD","BIF","BMD","BSD","BWP","BZD","CAD","NZD","FJD","FKP","GIP","GMD","GYD","JMD","KYD","LRD","MGA","MOP","MUR","MWK","MYR","NGN","PGK","PKR","RWF","SBD","SCR","SEK","SGD","SHP","SLL","ANG","SZL","TOP","TTD","VUV","WST","ARS","BOB","BRL","CLP","COP","CRC","CUP","DOP","GTQ","HNL","MXN","NIO","PAB","PEN","PYG","UYU","VES","AFN","GNF","CDF","HTG","XPF","HRK","HUF","AMD","IDR","ISK","JPY","GEL","CVE","KZT","KHR","KPW","KRW","TRY","KGS","LAK","MZN","MKD","MNT","BND","MMK","NOK","NPR","AWG","SRD","PLN","STN","MDL","RON","UAH","LKR","ALL","RSD","TJS","THB","TMT","UZS","VND","TWD"]

getCountry()

根据用户设备的语言设置返回用户当前的国家/地区代码。例如,如果语言设置为印度英语,则该国家/地区返回为IN

注意:如果您使用的是模拟器,Time Zone属性会输出Universal

例如,此输出将设备的语言设置设为English India

local: 786
Currency: INR
Country: IN
Time Zone: Europe/London
24 Hour clock: false
Calendar: gregorian

例如,此输出将设备的语言设置设为American English

Country: US
Time Zone: Universal
24 Hour clock: false
Calendar: gregorian
getTemperatureUnit:fahrenheit
usesMetricSystem:false

方法类型

已复制到剪贴板。

type getCountry = () => string;

示例1

已复制到剪贴板。

import { getCountry } from "@amazon-devices/react-native-localize";

console.log(getCountry());
// -> "FR"

示例2

您可以根据用户设备的位置向用户显示自定义消息。

在以下代码中,您可以使用:

  1. @amazon-devices/react-native-localize中的getCountry() 方法,用于从设备获取国家/地区。
  2. useState() 方法,用于保存国家/地区代码。
  3. 开关语句,用于根据国家/地区代码更改消息。

注意:​ 更改设备上的设备位置,请前往Settings(设置)> Preferences(首选项)> Languages(语言)。

已复制到剪贴板。

import React, {useEffect, useState} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {getCountry} from '@amazon-devices/react-native-localize';

const GetCountry = () => {
const [country, setCountry] = useState(null);
const [message, setMessage] = useState('');

useEffect(() => {
const countryCode = getCountry();
setCountry(countryCode);

switch (countryCode) {
case 'US':
setMessage('Welcome, American user!');
break;
case 'GB':
setMessage('Welcome, British user!');
break;
case 'IN':
setMessage('Namaste, Indian user!');
break;
default:
setMessage('Welcome, global user!');
break;
}
}, []);

return (
<View style={styles.container}>
<Text style={styles.text}>Country Code: {country}</Text>
<Text style={styles.message}>{message}</Text>
</View>
);
};

输出

示出Vega模拟器设备上输出的屏幕截图,其中显示IN国家/地区代码和消息。
示出Vega模拟器设备上输出的屏幕截图,其中显示US国家/地区代码和消息。

拉丁美洲地区

使用拉丁美洲区域设置的设备将返回“UN”而不是“419”,因为“419”不是标准的国家/地区代码。


getCalendar()

返回用户的首选日历格式。

方法类型

已复制到剪贴板。

type getCalendar = () =>
  | "gregorian"
  | "buddhist"
  | "coptic"
  | "ethiopic"
  | "ethiopic-amete-alem"
  | "hebrew"
  | "indian"
  | "islamic"
  | "islamic-umm-al-qura"
  | "islamic-civil"
  | "islamic-tabular"
  | "iso8601"
  | "japanese"
  | "persian";

示例

已复制到剪贴板。

import { getCalendar } from "@amazon-devices/react-native-localize";

console.log(getCalendar());
// -> "gregorian"

getTemperatureUnit()

返回用户的首选温度单位。

方法类型

已复制到剪贴板。

type getTemperatureUnit = () => "celsius" | "fahrenheit";

示例

已复制到剪贴板。

import { getTemperatureUnit } from "@amazon-devices/react-native-localize";

console.log(getTemperatureUnit());
// -> "celsius"

getTimeZone()

根据用户设备的语言设置中的国家/地区,返回用户的当前时区。模拟器返回Universal时区。电视设备返回在设备设置中设置的时区,例如Europe/London

例如,此输出将设备的语言设置设为American English

Country: US
Time Zone: Universal
24 Hour clock: false
Calendar: gregorian
getTemperatureUnit:fahrenheit
usesMetricSystem:false

方法类型

已复制到剪贴板。

type getTimeZone = () => string;

示例

已复制到剪贴板。

import { getTimeZone } from "@amazon-devices/react-native-localize";

console.log(getTimeZone());
// -> "Asia/Yerevan"

uses24HourClock()

如果用户偏好24小时的时钟格式,则返回true;如果用户偏好12小时的时钟格式,则返回false

方法类型

已复制到剪贴板。

type uses24HourClock = () => boolean;

示例

已复制到剪贴板。

import { uses24HourClock } from "@amazon-devices/react-native-localize";

console.log(uses24HourClock());
// -> true

usesMetricSystem()

如果用户偏好公制度量系统,则返回true;如果用户偏好英制度量系统,则返回false

方法类型

已复制到剪贴板。

type usesMetricSystem = () => boolean;

示例

已复制到剪贴板。

import { usesMetricSystem } from "@amazon-devices/react-native-localize";

console.log(usesMetricSystem());
// -> true

usesAutoDateAndTime()

显示设备是否启用自动日期和时间设置。

方法类型

已复制到剪贴板。

type usesAutoDateAndTime = () => boolean | undefined;

示例

已复制到剪贴板。

import { usesAutoDateAndTime } from "@amazon-devices/react-native-localize";

console.log(usesAutoDateAndTime());
// -> false/true

usesAutoTimeZone()

显示设备是否启用自动时区设置。

方法类型

已复制到剪贴板。

type usesAutoTimeZone = () => boolean | undefined;

示例

已复制到剪贴板。

import { usesAutoTimeZone } from "@amazon-devices/react-native-localize";

console.log(usesAutoTimeZone());
// -> false

支持的版本

程序包名称 亚马逊NPM库版本 Vega OS内部版本号 Vega SDK版本 发布说明
@amazon-devices/react-native-localize 2.0.1+3.0.4 OS 1.1 (201010438050) 0.20  

支持的第三方库和服务


Last updated: 2025年12月22日