Question

我有以下标记：

<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>

这会创建一个文本块，其中协议和隐私策略以不同的颜色呈现。目标是当用户点击它们以执行显示协议或策略的功能时。问题是，点击事件不会为Spans触发。此事件甚至可以在此级别上提供，还是仅在顶级标签级别上提供？

关于如何实现这一目标的任何想法？

感谢。

Answer 1

您可以在api文档中阅读：https://docs.nativescript.org/api-reference/classes/_ui_text_base_span_.span

，NativeScript中的

Span元素没有触摸事件。

但是有一个实现这样的功能的拉取请求：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);
}

2020年6月更新：

Span元素现在支持linkTapEvent。您可以阅读test来了解其用法。不幸的是，我还无法构建Playground Demo。

Answer 2

你想做

<Span text="Privacy Policy." foregroundColor="#3aba90" tap="{{ $parents['Page'].viewPolicy }}" /> https://docs.nativescript.org/core-concepts/data-binding#binding-to-a-parent-binding-context

Nativescript FormattedString - 跨度

2 个答案:

2020年6月更新：