NativeScript 反馈

💡 插件版本 2.0.0+ 与 NativeScript 7+ 兼容。如果您需要针对较旧版本的 NativeScript，请坚持使用插件版本 1.5.0。

在 iOS 和 Android 上运行包含的演示 - 在 YouTube 上有更好的帧率！https://www.youtube.com/watch?v=A3jX5g9msm0

演示应用

NativeScript-Core (XML)

查看 demo 文件夹。这是如何克隆和运行它的

git clone https://github.com/EddyVerbruggen/nativescript-feedback
cd nativescript-feedback/src
npm run demo.ios # or demo.android

NativeScript-Angular

此插件是我在 Angular 中构建的插件展示应用的一部分。

NativeScript-Vue

查看 demo-vue 文件夹。这是如何克隆和运行它的

git clone https://github.com/EddyVerbruggen/nativescript-feedback
cd nativescript-feedback/src
npm run demo-vue.ios # or demo-vue.android

安装

tns plugin add nativescript-feedback

API

要求/导入插件

JavaScript

var FeedbackPlugin = require("nativescript-feedback");
var feedback = new FeedbackPlugin.Feedback();

TypeScript

import { Feedback, FeedbackType, FeedbackPosition } from "nativescript-feedback";

export class MyClassWithFeedback {
  private feedback: Feedback;
  
  constructor() {
    this.feedback = new Feedback();
  }
}

显示

显示反馈可以像这样简单

this.feedback.show({
  message: "Easiest thing ever, right?"
});

它使用了很多合理的默认值。然而，有很多你可能想调整的地方。所有这些都是可选的

属性	默认值	描述
`title`	`undefined`	顶部的粗体标题。
`titleColor`	`new Color("white")`	标题的颜色。
`titleFont`	Bold system font	iOS 需要字体名称，而 android 需要文件名。请参考演示中的示例。
`titleSize`	`16`	标题字体的大小。
`message`	`undefined`	标题下方的消息。
`messageColor`	`new Color("white")`	消息的颜色。
`messageFont`	系统字体	iOS 需要字体名称，而 android 需要文件名。请参考演示中的示例。
`messageSize`	`13`	消息字体的大小。
`duration`	`4000`	显示反馈的持续时间（毫秒）。
`type`	`FeedbackType.Custom`	是以下之一：`.Custom`、`.Success`、`.Warning`、`.Error`、`.Info`。每个都有在上面的动画中显示的独立样式。您仍然可以根据自己的喜好覆盖所有其他属性。
`position`	`FeedbackPosition.Top`	是 `.Top` 或 `.Bottom`。
`backgroundColor`	取决于 `type`	背景的颜色。
`icon`	取决于 `type`	在左侧显示的定制图标。从 `App_Resources/<platform>` 文件夹中加载。示例在这里。想完全不设置图标？不要设置 `type`。
`android.iconColor`	请参阅描述	在 iOS 上，图标颜色保持不变，但在 Android 上它是白色。设置此颜色以覆盖后者（也请参阅下面的 TypeScript 示例）。
`android.iconPulseEnabled`	`true`	在 Android 上，您可以禁用图标的脉冲效果。
`onTap`	`undefined`	当用户点击您的反馈时调用的回调函数。
`onShow`	`undefined`	当反馈显示时的回调。iOS 注意：调用两次：一次在动画时，一次在完成后。
`onHide`	`undefined`	当反馈隐藏时的回调。

演示应用中的一个示例显示了自定义图标和替代颜色。点击此处查看。你可以通过以下操作进入：

JavaScript

var FeedbackType = require ("nativescript-feedback").FeedbackType;
var FeedbackPosition = require ("nativescript-feedback").FeedbackPosition;
var color = require("color");

this.feedback.show({
  title: "Thumbs up!",
  titleColor: new color.Color("#222222"),
  position: FeedbackPosition.Bottom, // iOS only
  type: FeedbackType.Custom, // this is the default type, by the way
  message: "Custom colors and icon. Loaded from the App_Resources folder.",
  messageColor: new color.Color("#333333"),
  duration: 3000,
  backgroundColor: new color.Color("yellowgreen"),
  icon: "customicon", // in App_Resources/platform folders
  onTap: function() { console.log("showCustomIcon tapped") },
  onShow: function(animating) { console.log(animating ? "showCustomIcon animating" : "showCustomIcon shown") },
  onHide: function() { console.log("showCustomIcon hidden") }
});

TypeScript

import { FeedbackType, FeedbackPosition } from "nativescript-feedback";
import { Color } from "tns-core-modules/color";

this.feedback.show({
  title: "Thumbs up!",
  titleColor: new Color("#222222"),
  position: FeedbackPosition.Bottom,
  type: FeedbackType.Custom, // this is the default type, by the way
  message: "Custom colors and icon. Loaded from the App_Resources folder.",
  messageColor: new Color("#333333"),
  duration: 3000,
  backgroundColor: new Color("yellowgreen"),
  icon: "customicon", // in App_Resources/platform folders
  android: {
    iconColor: new Color("#222222") // optional, leave out if you don't need it
  },
  onTap: () => console.log("showCustomIcon tapped"),
  onShow: animating => console.log(animating ? "showCustomIcon animating" : "showCustomIcon shown"),
  onHide: () => console.log("showCustomIcon hidden")
});

隐藏

隐藏消息可以通过自动方式完成（参见duration），通过手势（点击/滑动）或如以下示例所示通过编程方式

this.feedback.hide();

便捷函数

由于在许多情况下，你可能只想显示成功/信息/警告/错误消息，因此此插件已经为你准备好了。你可以调用这些函数中的任何一个，并传入上述任何属性来自定义

`成功`

this.feedback.success({
  title: "Awesome",
  message: "That was great!"
});

`信息`

this.feedback.info({
  title: "Info <> Data",
  message: "Info is relevant data, not just any data."
});

`警告`

this.feedback.warning({
  message: "Your battery is almost empty"
});

`错误`

this.feedback.error({
  title: "KABOoooOOM!",
  titleColor: new Color("black")
});

鸣谢

在Android上，我们使用了Tapadoo的Alerter库，而在iOS上使用了ilyainyushin的ISMessages库。