NativeScript 反馈

这是从 https://github.com/EddyVerbruggen/nativescript-feedback 分支出来的，更新了依赖项。非常感谢 @EddyVerbruggen 一直以来的出色工作！

iOS 和 Android 运行内置演示 - 在 YouTube 上帧率更佳！

安装

tns plugin add @valor/nativescript-feedback

API

要求 / 导入插件

JavaScript

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

TypeScript

import { Feedback, FeedbackType, FeedbackPosition } from "@valor/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 需要 font 名称，android 需要 file 名称。请参考演示示例。
`titleSize`	`16`	标题字体的大小。
`message`	`undefined`	标题下面的消息。
`messageColor`	`new Color("white")`	消息的颜色。
`messageFont`	系统字体	iOS 需要 font 名称，android 需要 file 名称。请参考演示示例。
`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 ("@valor/nativescript-feedback").FeedbackType;
var FeedbackPosition = require ("@valor/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 "@valor/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")
});

hide

隐藏消息可以通过自动完成（参见 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库。