@nativescript-community/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-community/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-community/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-community/l";

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

JavaScript / XML

app.js

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

模板

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

脚本

const localize = require("@nativescript-community/l");

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

怪癖

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

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

Vue

app.js

import { l } from "@nativescript-community/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-community/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);
}