Nativescript FormattedString-跨度上的轻击事件 [英] Nativescript FormattedString - tap event on a Span

问题描述

我有以下标记:

 <StackLayout paddingLeft="15" paddingRight="15" dock="top" >
  <Label textWrap="true">
    <Label.formattedText>
      <FormattedString>
        <FormattedString.spans>
          <Span text="By checking 'yes' I understand that this is a legally valid and binding written agreement, and I indicate that I have read, understand, and agree to the terms of my " />
          <Span text="Agreement. " foregroundColor="#3aba90" tap="viewAgreemnent" />
          <Span text="Also, by checking 'yes', I certify that I have read and agree to accept electronically the "  />
          <Span text="Privacy Policy." foregroundColor="#3aba90" tap="viewPolicy" />
        </FormattedString.spans>
      </FormattedString>
    </Label.formattedText>
  </Label>
</StackLayout> 

这将创建一个文本块，其中协议"和隐私策略"以不同的颜色呈现.目的是当用户点击他们以执行显示协议或策略的功能时.问题在于，span事件不会触发.此事件甚至在此级别还是仅在最高标签级别都可用?

关于如何实现此目标的任何想法?

谢谢.

您可以在api文档中阅读 https://github.com /NativeScript/NativeScript/pull/8256

与此同时，一种变通方法(注意:我正在使用nativescript-vue)将类似于以下内容.显然，它远不理想，但会产生预期的结果:

 <FlexboxLayout flexWrap="wrap">
    <Label text="I " />
    <Label text="accept " />
    <Label text="the " />
    <Label text="Terms of Service" textDecoration="underline" @tap="open('https://example.com')" />
    <Label text=" and " />
    <Label text="the " />
    <Label text="Privacy Policy" textDecoration="underline" @tap="open('https://example.com')" />
    <Label text="." />
</FlexboxLayout>
 

这是open()函数，用于在浏览器中打开提供的URL:

 import * as utils from "tns-core-modules/utils/utils";

open(url) {
  utils.openUrl(url);
}
 

I have the following markup:

<StackLayout paddingLeft="15" paddingRight="15" dock="top" >
  <Label textWrap="true">
    <Label.formattedText>
      <FormattedString>
        <FormattedString.spans>
          <Span text="By checking 'yes' I understand that this is a legally valid and binding written agreement, and I indicate that I have read, understand, and agree to the terms of my " />
          <Span text="Agreement. " foregroundColor="#3aba90" tap="viewAgreemnent" />
          <Span text="Also, by checking 'yes', I certify that I have read and agree to accept electronically the "  />
          <Span text="Privacy Policy." foregroundColor="#3aba90" tap="viewPolicy" />
        </FormattedString.spans>
      </FormattedString>
    </Label.formattedText>
  </Label>
</StackLayout>

This creates one text block with Agreement and Privacy Policy rendered in a different color. The goal is when the user taps them to execute a function displaying the agreement or the policy. The problem is that the tap event does not fire for the Spans. Is this event even available at this level or only on the top Label level?

Any ideas on how to accomplish this?

Thanks.

解决方案

Span elements in NativeScript have no touch events, as you can read in the api documentation: https://docs.nativescript.org/api-reference/classes/_ui_text_base_span_.span

There is however a pull request to implement such a feature: https://github.com/NativeScript/NativeScript/pull/8256

A workaround (note: I'm using nativescript-vue) for the meantime would be something like the following. While, obviously, far less than ideal, it will yield the desired result:

<FlexboxLayout flexWrap="wrap">
    <Label text="I " />
    <Label text="accept " />
    <Label text="the " />
    <Label text="Terms of Service" textDecoration="underline" @tap="open('https://example.com')" />
    <Label text=" and " />
    <Label text="the " />
    <Label text="Privacy Policy" textDecoration="underline" @tap="open('https://example.com')" />
    <Label text="." />
</FlexboxLayout>

Here is the open() function to open the provided URLs in the browser:

import * as utils from "tns-core-modules/utils/utils";

open(url) {
  utils.openUrl(url);
}

这篇关于Nativescript FormattedString-跨度上的轻击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！