@nativescript/localize

内容

@nativescript/localize

简介

一个使用每个平台的原生功能实现国际化 (i18n) 的插件。它受到 nativescript-i18n 的启发。

安装

要安装此插件，请在项目根目录中运行以下命令。

cli

npm install @nativescript/localize

使用 @nativescript/localize

本节介绍如何在 NativeScript 支持的多种版本中使用 @nativescript/localize 插件。

NativeScript Core 中的本地化

在 app 文件夹中创建一个名为 i18n 的文件夹，其结构如下所示

app
  | i18n
      | en.json           <-- english language
      | es.default.json   <-- spanish language (default)

es.default.json 示例

json

{
  "app.name": "Comida Rica!",

  "user": {
    "name": "Paula"
  }
}

在 main.ts 文件中，使用 Appilcation 类的 setResources 方法注册 localize 函数，如下所示。

import { Application } from '@nativescript/core'
import { localize } from '@nativescript/localize'

Application.setResources({ L: localize })

然后，在标记中使用 L 属性。

xml

<StackLayout>
    <Label text="{{ 'Hello world !' | L }}" />
    <Label text="{{ 'I am ' + L('user.name') }}" />
  </StackLayout>

要在代码隐藏中进行本地化，只需直接调用 localize 方法。

import { localize } from '@nativescript/localize'

console.log(localize('Hello world !'))

特性

⚠️ 如果您注意到翻译在您的主 XML 页面上有效，但在您导航到的页面上无效，则将此小技巧添加到该新页面的“页面加载”函数中

const page = args.object
page.bindingContext = new Observable()

Angular 中的本地化

在 src 文件夹中创建一个名为 i18n 的文件夹，其结构如下所示

src
  | i18n
      | en.json           <-- english language
      | fr.default.json   <-- french language (default)
      | es.js

您需要设置默认语言并确保它包含应用程序名称以避免任何错误。

在 app.module.ts 文件中注册本地化模块 (NativeScriptLocalizeModule)

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'
import { NativeScriptLocalizeModule } from '@nativescript/localize/angular'
import { NativeScriptModule } from '@nativescript/angular'

import { AppComponent } from './app.component'

@NgModule({
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  imports: [NativeScriptModule, NativeScriptLocalizeModule],
  schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}

然后，在 HTML 文件中，使用本地化程序，如下所示

xml

<Label text="{{ 'Hello world !' | L }}"/>
<Label text="{{ 'I am %s' | L:'user name' }}"/>

Vue 中的本地化

在 app 文件夹中创建一个名为 i18n 的文件夹，其结构如下所示

app
  | i18n
      | en.json           <-- english language
      | es.default.json   <-- spanish language (default)

es.default.json 示例

json

{
  "app.name": "Comida Rica!",

  "user": {
    "name": "Paula"
  }
}

要在 Vue3 中进行本地化，请导入 localize 方法并在标记中调用它。

import { localize } from '@nativescript/localize'

xml

<ActionBar>
	<Label :text="localize('app.name')" class="font-bold text-lg bg-black" />
</ActionBar>

<StackLayout class="px-4">
	<Label :text="localize('user.name')" textWrap="true" />
</StackLayout>

Svelte 中的本地化

在 app 文件夹中创建一个名为 i18n 的文件夹，其结构如下所示

app
  | i18n
      | en.json           <-- english language
      | es.default.json   <-- spanish language (default)

es.default.json 示例

json

{
  "app.name": "Comida Rica!",

  "user": {
    "name": "Paula"
  }
}

要在 Svelte 中进行本地化，请导入 localize 方法，然后在标记中调用它。

import { localize } from '@nativescript/localize'

xml

<actionBar>
	<label text={ localize('app.name') } class="font-bold text-lg bg-black" />
</actionBar>

<stackLayout class="px-4">
	<label text={ 'Nombre: ' + localize('user.name')}/>
</stackLayout>

设置默认语言

要设置默认语言，请在默认语言文件的名称中添加 .default 扩展名。

fr.default.json

确保它包含应用程序名称以避免任何错误。

Android 使用与设备语言相对应的语言环境文件。例如，如果设备语言设置为 西班牙语，则将使用 es.json。

本地化应用程序名称

要本地化应用程序名称，请使用 app.name 键。

json

{
  "app.name": "My app"
}

文件格式

每个文件都使用 require 导入，因此请使用您选择的格式。

JSON

json

{
  "app.name": "My app",
  "ios.info.plist": {
    "NSLocationWhenInUseUsageDescription": "This will be added to InfoPlist.strings"
  },
  "user": {
    "name": "user.name",
    "email": "user.email"
  },
  "array": ["split the translation into ", "multiples lines"],
  "sprintf": "format me %s",
  "sprintf with numbered placeholders": "format me %2$s one more time %1$s"
}

Javascript

export const i18n = {
  'app.name': 'My app',
}

本地化 iOS 属性

要本地化 iOS 属性，请在它前面加上 ios.info.plist.。以下示例显示了如何本地化 NSLocationWhenInUseUsageDescription 属性。

json

{
  "ios.info.plist.NSLocationWhenInUseUsageDescription": "This will be added to InfoPlist.strings"
}

在运行时动态更改语言

要动态更改运行时的语言，请使用 overrideLocale 方法。

iOS

typescript

import { overrideLocale } from '@nativescript/localize'
const localeOverriddenSuccessfully = overrideLocale('en-GB') // or "nl-NL", etc (or even just the part before the hyphen)

Android

对于 Android，首先在 main.ts 文件的 launchEvent 处理程序中调用 androidLaunchEventLocalizationHandler 方法。

import { Application } from '@nativescript/core'
import { androidLaunchEventLocalizationHandler } from '@nativescript/localize'

Application.on(Application.launchEvent, (args) => {
  if (args.android) {
    androidLaunchEventLocalizationHandler()
  }
})

然后，在用户选择语言的设置页面中，调用 overrideLocale 方法

import { overrideLocale } from '@nativescript/localize'
const localeOverriddenSuccessfully = overrideLocale('en-GB') // or "nl-NL", etc (or even just the part before the hyphen)

重要

在两个平台上，调用 overrideLocale 方法后，您必须要求用户重新启动应用程序。

例如

import { Application, Utils } from '@nativescript/core'
import { overrideLocale } from '@nativescript/localize'

alert({
  title: 'Switch Language',
  message: 'The application needs to be restarted to change language',
  okButtonText: 'Quit!',
}).then(() => {
  L.localize.overrideLocale(selectedLang)
  if (isAndroid) {
    Utils.android.getCurrentActivity().finish()
  } else {
    exit(0)
  }
})

重要

如果您使用 Android 应用包发布您的 Android 应用程序，请将以下内容添加到 App_Resources/Android/app.gradle 中，以确保所有语言都捆绑在拆分 APK 中

groovy

android {

  // there maybe other code here //

  bundle {
    language {
      enableSplit = false
    }
  }
}

提示

您可以通过 Device 类的 language 属性获取用户手机上的默认语言。

import { Device } from '@nativescript/core'

console.log("user's language is", Device.language.split('-')[0])

提示

overrideLocale 方法将语言存储在应用程序设置中的一个特殊键中，您可以像这样访问它

import { ApplicationSettings } from '@nativescript/core'

console.log(ApplicationSettings.getString('__app__language__')) // only available after the first time you use overrideLocale(langName);

故障排除

当处于模态上下文中时，Angular 本地化管道不起作用。作为解决方法，您可以在组件构造函数中触发更改检测

constructor(
  private readonly params: ModalDialogParams,
  private readonly changeDetectorRef: ChangeDetectorRef,
) {
  setTimeout(() => this.changeDetectorRef.detectChanges(), 0);
}

Android N+ 上的 WebView 问题

在 Android N+ 上，WebView 的第一次创建会将应用程序语言环境重置为设备默认值。因此，您必须重新设置所需的语言环境。这是一个原生错误，解决方法是

xml

<WebView url="https://someurl.com" @loaded="webViewLoaded"/>

javascript

import {
  overrideLocale,
  androidLaunchEventLocalizationHandler,
} from '@nativescript/localize'
import { ApplicationSettings } from '@nativescript/core'
const locale = ApplicationSettings.getString('__app__language__')

function webViewLoaded() {
  overrideLocale(locale)
  androidLaunchEventLocalizationHandler()
}

API

该插件提供以下函数。

localize()

localizeString: string = localize(key, ...args)

从 i18n 目录中的 .json 文件中检索指定 key 的翻译。

overrideLocale()

isLocaleOverwritten: boolean = overrideLocale(locale)

使用指定的 locale 参数覆盖当前语言环境。

androidLaunchEventLocalizationHandler()

androidLaunchEventLocalizationHandler()

致谢

非常感谢 Ludovic Fabrèges (@lfabreges) 在过去开发和维护此插件。当他因优先级改变而不得不放弃它时，他很乐意将存储库移交给我。然后 Eddy 加入 NativeScript 的技术指导委员会，并为了极大地改进插件维护它被限定范围并移到这里

许可证

Apache 许可证版本 2.0

@nativescript/localize ​

内容 ​

简介 ​

安装 ​

使用 @nativescript/localize ​

NativeScript Core 中的本地化 ​

特性 ​

Angular 中的本地化 ​

Vue 中的本地化 ​

Svelte 中的本地化 ​

设置默认语言 ​

本地化应用程序名称 ​

文件格式 ​

JSON ​

Javascript ​

本地化 iOS 属性 ​

在运行时动态更改语言 ​

iOS ​

Android ​

故障排除 ​

Angular 本地化管道和模态上下文 ​

Android N+ 上的 WebView 问题 ​

API ​

localize() ​

overrideLocale() ​

androidLaunchEventLocalizationHandler() ​

致谢 ​

许可证 ​

贡献者

@nativescript/localize

内容

简介

安装

使用 @nativescript/localize

NativeScript Core 中的本地化

特性

Angular 中的本地化

Vue 中的本地化

Svelte 中的本地化

设置默认语言

本地化应用程序名称

文件格式

JSON

Javascript

本地化 iOS 属性

在运行时动态更改语言

iOS

Android

故障排除

Angular 本地化管道和模态上下文

Android N+ 上的 WebView 问题

API

localize()

overrideLocale()

androidLaunchEventLocalizationHandler()

致谢

许可证