Nativescript Copilot

为您的 Nativescript 应用提供分步讲解！

灵感来源于优秀的 React Native Copilot 插件

Nativescript-Copilot 是一个组件，目前仅适用于 NativeScript-Vue。如果您想看到 Nativescript-Core 或 Nativescript-Angular 的实现，请提交一个 PR。

快速入门 - Vue

npm install --save @nativescript-copilot/vue

主入口点

import Copilot from '@nativescript-copilot/vue';
Vue.use(Copilot)

Nativescript-Vue 使用方法

这可以在逐页的基础上使用。导游的主要驱动方式是通过传递每个步骤的 ref。例如下面，我们在 Image 组件中有一个名为 step1 的 ref。

  <StackLayout col="0" verticalAlignment="bottom" horizontalAlignment="left">
    <Image ref="step1" src="~/assets/logo.png" height="75%" width="75%" borderWidth="1"/>
  </StackLayout>

您可以将多个 refs 组合起来创建一个导游。您需要创建一个对象数组，该数组包含特定页面的导游配置。例如

      this.steps = [
        {
          name: 'First',
          text: 'here is some text',
          order: 1,
          target: this.$refs.step1.nativeView,
          animated: true,
          isFirstStep: true
        },
        {
          name: 'Second',
          text: 'here is some text with a rounded highlighted zone and padding',
          order: 2,
          target: this.$refs.step2.nativeView,
          animated: true,
          highlightBorderRadius: 10,
          highlighPadding: 5,
        },
        {
          name: 'Third',
          text: 'here is some text that should hopefully be long enought to cause a wrap.  What will happen if the text is too long. Find out!',
          order: 3,
          target: this.$refs.step3.nativeView,
          animated: true
        },
        {
          name: 'Fourth',
          text: 'This has a veritcal offset of -5 which will push the step 5dp towards the top',
          order: 4,
          target: this.$refs.step4.nativeView,
          animated: false,
          verticalOffset: -5,
        },
        {
          name: 'Fifth',
          text: '',
          order: 4,
          target: this.$refs.step3.nativeView,
          animated: false,
          isCustom: true,
          itemTemplate: '<Label text="This is a custom template!" color="green"/>',
          customBackgroundColor: 'black',
          customBorderRadius: '15',
          numberAccentColor: 'white',
          numberBackgroundColor: 'green',
           customTooltipStyle:  {
            fontFamily: 'Avenir-Bold',
            tooltipFontSize: 12,
            tooltipTextColor: 'white',
            buttonFontSize: 12,
            accentColor: 'white'
          },
          customLabels: {
            skip: 'Stop',
            previous: 'Before',
            next: 'Continue',
            finish: 'Done'
          }
        },
        {
          name: 'Sixth',
          text: 'This will darken the whole page and center the tool tip',
          order: 4,
          target: this.$refs.step4.nativeView,
          animated: false,
          darkenWholePage: true,
          isLastStep: true
        }
      ]

在 Step 对象中有几个配置项

然后，您将步骤配置传递给Copilot组件作为steps属性。在下面的示例中，我们使用计算属性来提供steps属性

  <Copilot
    :steps="computedSteps"
    :animationDuration="animationDuration"
    :labels="labels"
    :tooltipStyle="tooltipStyle"
    :overlayColor="overlayColor"
    :backgroundColor="backgroundColor"
    :accentColor="accentColor"
    ref="copilot"
  />

还可以将其他几个属性传递给Copilot组件。它们是

上述选项的初始化示例（以TypeScript完成）

private animationDuration: number = 300;
private androidStatusBarVisible: boolean = false;
private labels: object = {
  skip: 'Skip',
  previous: 'Previous',
  next: 'Next',
  finish: 'Finish'
};
private tooltipStyle: object = {
  fontFamily: 'Avenir-Light',
  tooltipFontSize: 14,
  tooltipTextColor: 'black',
  buttonFontSize: 14,
  accentColor: 'green'
}
private overlayColor: string = 'rgba(0, 0, 0, 0.4)';
private numberAccentColor: string = 'green';
private numberBackgroundColor: string = 'white';
private toolTipBackgroundColor: string = 'white';
private toolTipBorderRadius: string = '3';
private highlightPadding: number = 5;
private highlightBorderRadius: number = 10;

Copilot组件会发出几个事件

您将调用从Copilot组件中选择的名称的事件。在下面的示例中，我们正在调用事件上的函数

  <Copilot
    :steps="computedSteps"
    @step-change="stepChanged"
    @stop="copilotStopped"
    @not-ready="copilotNotReady"
    @start="copilotStarted"
    @highlight-tap="copilotHighlightTap"
    ref="copilot"
  />

要在一个特定的页面上开始浏览，您需要调用Copilot的start函数。一个例子是：this.$refs.copilot.start();

Vue演示项目

查看演示项目，该项目实现了一个简单的项目，并使用了许多上述选项中讨论的插件。