NativeScript 本地化

这是一个利用每个平台的本地化原生功能实现的国际化的 NativeScript 插件。它受到 nativescript-i18n 的启发。

致谢

在此，我要向 Ludovic Fabrèges (@lfabreges) 表示深深的感谢，他过去开发了并维护了这个插件。由于优先级转移，他不得不放弃它，但他很慷慨地将代码库移给了我。Eddy 接着加入了 NativeScript 的技术指导委员会，并将插件维护提升到了一个新的水平 将其范围缩小并迁移至此！

目录

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

安装

tns plugin add @nativescript/localize

用法

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

src
  | 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';

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

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

常见问题解答

如何设置默认语言？

将 .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';
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 { Application } from '@nativescript/core';
import { androidLaunchEventLocalizationHandler } from '@nativescript/localize';

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

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

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

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

例如

import { Application } 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) {
		(Application.android.foregroundActivity || Application.android.startActivity).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';

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

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

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 时存在一个奇怪的副作用。

由于未知原因，首次创建它将应用程序区域设置重置为设备默认值。因此，您需要将所需的区域设置设置回。这是一个原生漏洞，解决方案是

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

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

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

许可证

Apache许可证第2版