@schoolsquirrel/emoji-picker😃

有很多 Angular 和 Web 的表情选择器，但没有任何一个是为 NativeScript 设计的？！让我们来改变这个现状！

外观如何

键盘视图	表情选择器视图

限制

当前表情选择器仅支持 Android 和 NativeScript 7 或更高版本。如果您需要使用较旧的 NativeScript 版本，请查看 旧分支。

安装

使用 ns plugin add @schoolsquirrel/emoji-picker 安装插件

使用方法

它是如何工作的？

此插件将为您提供两个元素，EmojiPicker 和 EmojiLabel。第一个将为您提供可编辑的文本框（非常类似于 NativeScript TextView），第二个是一个标签（类似于 NativeScript Label），它将正确显示带有表情的文本。

NativeScript Core

定义命名空间

<Page class="page"
    loaded="pageLoaded"
    navigatingTo="onNavigatingTo"
    xmlns="http://schemas.nativescript.org/tns.xsd"
    xmlns:ns="@schoolsquirrel/emoji-picker">

使用插件

<ns:EmojiPicker id="myEmojiPicker"></ns:EmojiPicker>
<ns:EmojiLabel id="myEmojiLabel"></ns:EmojiLabel>

在 JS / TS 方面，您可以像这样切换编辑文本框的键盘或弹出窗口

const page = frame.Frame.topmost().currentPage;
page.getViewById('myEmojiPicker').togglePopup();

<EmojiPicker> 类扩展了 NativeScript 的 TextField 类，这意味着所有 TextField 的属性和方法都受支持。它与 <EmojiLabel> 和 Label 类相同。

您可以通过使用 ids、classes 或 (s)css 中的标签选择器添加自定义样式

EmojiLabel {
	background-color: rgba(14, 190, 221, 0.233);
	padding: 10;
	text-align: center;
	font-size: 20;
}

EmojiPicker {
	padding: 30;
	color: green;
	margin: 20;
}

有关更多信息示例，请参阅 demo 文件夹。

Angular 版本

在您的 app.module.ts 中包含库，如下所示

import { EmojiPickerModule } from '@schoolsquirrel/emoji-picker/angular';

并将其添加到导入数组中

@NgModule({
    bootstrap:  [
        ...
    ],
    declarations: [
        ...
    ],
    imports: [
        ...
        EmojiPickerModule, // <--- add this here
    ],
    schemas: [
        ...
    ],
})
export class AppModule { }

在 .html 文件中使用它

<EmojiPicker #myEmojiPicker></EmojiPicker> <EmojiLabel #myEmojiLabel text="Have fun with @schoolsquirrel/emoji-picker"></EmojiLabel>

在 TS 方面，您可以像这样切换编辑文本框的键盘或弹出窗口

export class HomeComponent {
	@ViewChild('myEmojiPicker', { static: false }) public myEmojiPicker: EmojiPicker;
	@ViewChild('myEmojiLabel', { static: true }) public myEmojiLabel: EmojiLabel;

	public onButtonTap(): void {
		this.myEmojiPicker.nativeElement.togglePopup();
	}

	public onCopyBtnTap(): void {
		console.log('pressed!');
		this.myEmojiLabel.nativeElement.text = this.myEmojiPicker.nativeElement.text;
	}
}

<EmojiPicker> 类扩展了 NativeScript 的 TextField 类，这意味着所有 TextField 的属性和方法都受支持。它与 <EmojiLabel> 和 Label 类相同。

您可以通过使用 ids、classes 或 (s)css 中的标签选择器添加自定义样式

EmojiLabel {
	background-color: rgba(14, 190, 221, 0.233);
	padding: 10;
	text-align: center;
	font-size: 20;
}

EmojiPicker {
	padding: 30;
	color: green;
	margin: 20;
}

有关更多信息示例，请参阅 demo 和 demo-angular 文件夹。

许可证

MIT