NativeScript 7

使用 @nativescript/localize: ~5.0.0
源代码管理在此

如果使用 6 及以下版本，请参阅以下内容

本地化插件

这是一个使用各平台本地能力的国际化（i18n）插件，灵感来源于 nativescript-i18n

致谢

非常感谢 Ludovic Fabrèges (@lfabreges) 过去开发并维护此插件。由于优先级转移，他不得不放弃它，但他非常慷慨地将代码库转移到我手中。

安装

tns plugin add nativescript-localize

使用

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

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

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

Angular

app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptLocalizeModule } from "nativescript-localize/angular";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { AppComponent } from "./app.component";

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

模板

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

脚本

import { localize } from "nativescript-localize";

console.log(localize("Hello world !"));

JavaScript / XML

app.js

const application = require("application");
const localize = require("nativescript-localize");
application.setResources({ L: localize });

模板

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

脚本

const localize = require("nativescript-localize");

console.log(localize("Hello world !"));

怪癖

⚠️ 如果您注意到翻译在您的主 XML 页面上工作，但在您导航到的页面上不工作，那么请将此小技巧添加到该新页面的 '页面加载' 函数中

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

Vue

app.js

import { localize } from "nativescript-localize";

Vue.filter("L", localize);

模板

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

文件格式

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

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

const i18n = {
  "app.name": "My app"
};

module.exports = i18n;

常见问题解答

如何设置默认语言？

将 .default 扩展名添加到默认语言文件中，将其设置为后备语言

fr.default.json

如何本地化应用程序名称？

使用 app.name 键本地化应用程序名称

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

如何本地化 iOS 属性？

以 ios.info.plist. 开头的键用于本地化 iOS 属性

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

如何在运行时动态更改语言？

此插件使用每个平台的本地能力，因此语言选择由操作系统决定。

从插件版本 4.2.0 开始，在 iOS 上可以通过这样做来编程式地覆盖此语言

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

从插件版本 4.2.1 开始，在 Android 上可以通过这样做来编程式地覆盖此语言

在您的 app.ts / main.ts / app.js 中

import { on, launchEvent } from '@nativescript/core/application';
import { androidLaunchEventLocalizationHandler } from 'nativescript-localize/localize';

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

并在用户选择语言的设置页面上

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

重要：在这两种情况下，在调用 override Locale 后，您必须要求用户重新启动应用程序

例如

import { android as _android } from '@nativescript/core/application';
import { overrideLocale } from 'nativescript-localize/localize';

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

重要：如果您正在使用 Android 应用程序包发布您的 Android 应用程序，请将此添加到 App_Resources/Android/app.gradle，以确保所有语言都包含在拆分 APK 中

android {

  // there maybe other code here //

  bundle {
    language {
      enableSplit = false
    }
  }
}

提示：您可以使用此方法获取用户手机上的默认语言

import { device } from '@nativescript/core/platform';

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

提示：overrideLocale 方法将语言存储在应用程序设置中的特殊键中，您可以通过这种方式访问它

import { getString } from '@nativescript/core/application-settings'; 

console.log(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时会出现一个奇怪的副作用。

由于未知原因，它的首次创建会将应用程序的区域设置重置为设备默认值。因此，您需要将期望的区域设置恢复。这是一个原生缺陷，解决方案是

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

import {overrideLocale, androidLaunchEventLocalizationHandler} from "nativescript-localize/localize";
import {getString} from '@nativescript/core/application-settings';
const locale = getString('__app__language__')

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

NativeScript 7

如果使用 6 及以下版本，请参阅以下内容

本地化插件

致谢

目录

安装

使用

Angular

app.module.ts

模板

脚本

JavaScript / XML

app.js

模板

脚本

怪癖

Vue

app.js

模板

文件格式

JSON

JavaScript

常见问题解答

如何设置默认语言？

如何本地化应用程序名称？

如何本地化 iOS 属性？

如何在运行时动态更改语言？

从插件版本 4.2.0 开始，在 iOS 上可以通过这样做来编程式地覆盖此语言

从插件版本 4.2.1 开始，在 Android 上可以通过这样做来编程式地覆盖此语言

故障排除

在模态上下文中，Angular 本地化管道不工作

从Android N开始，使用WebView时会出现一个奇怪的副作用。