ns-l

这是一个 NativeScript 插件，使用每个平台的本地能力实现国际化（i18n）。它是 nativescript-localize 的直接分支。

差异

此插件被创建以与 nativescript-localize 有不同的行为

• 默认的 localize 方法已被重命名为 l
• 默认的 l 方法尝试从本地 JSON 对象中加载
• 您可以使用 loadLocalJSON 通过传递 JSON 或其路径来加载此类 JSON 对象
• 如果没有本地 JSON，l 将原生加载
• 键不再进行编码，这意味着键在原生/js 世界中相同。
• 区域 JSON 必须现在是真正的嵌套对象（键名中不包含 .）
• 在键名中已删除对特殊字符的支持。

致谢

许多感谢送给 Eddy Verbruggen 和 Ludovic Fabrèges (@lfabreges)，他们开发了并维护了 nativescript-localize。

目录

• 安装
• 使用
  • Angular
  • JavaScript
  • Vue
• 文件格式
• 常见问题解答
  • 如何设置默认语言？
  • 如何本地化应用程序名称？
  • 如何本地化 iOS 属性？
  • 如何动态地运行时更改语言？
• 故障排除
  • 在模态上下文中，angular 本地化管道不起作用

安装

tns plugin add nativescript-l

使用

在 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-l/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-l";

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

JavaScript / XML

app.js

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

模板

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

脚本

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

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

怪癖

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

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

Vue

app.js

import { l } from "nativescript-l";

Vue.filter("L", l);

模板

<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"
}

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

现在此模块使用 JSON 对象。覆盖包括 3 个步骤

• 覆盖原生语言，使用 overrideLocaleNative 完成
• 覆盖 JSON 语言，使用 loadLocalJSON 完成
• 更新所有标签、按钮...这是您的工作！

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

重要：如果您正在使用 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]);

提示：overrideLocaleNative 方法将语言存储在 app-settings 的一个特殊键中，您可以像这样访问它，

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

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

故障排除

在模态上下文中，angular 本地化管道不起作用

作为解决方案，您可以在组件构造函数内部触发变化检测

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