Nativescript FormattedString - Span 上的点击事件
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>
这将创建一个文本块,其中协议和隐私政策以不同的颜色呈现。目标是当用户点击它们以执行显示协议或政策的功能时。问题是 tap 事件不会为 Spans 触发。此事件是在此级别可用还是仅在顶级标签级别可用?
关于如何实现这个的任何想法?
谢谢。
你想做
<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 中的 Span
元素没有触摸事件,您可以在 api 文档中阅读:https://docs.nativescript.org/api-reference/classes/_ui_text_base_span_.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. You can read the test 看看它是如何使用的。不幸的是,我还无法构建 Playground Demo。
我有以下标记:
<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>
这将创建一个文本块,其中协议和隐私政策以不同的颜色呈现。目标是当用户点击它们以执行显示协议或政策的功能时。问题是 tap 事件不会为 Spans 触发。此事件是在此级别可用还是仅在顶级标签级别可用?
关于如何实现这个的任何想法?
谢谢。
你想做
<Span
text="Privacy Policy."
foregroundColor="#3aba90"
tap="{{ $parents['Page'].viewPolicy }}"
/>
https://docs.nativescript.org/core-concepts/data-binding#binding-to-a-parent-binding-context
Span
元素没有触摸事件,您可以在 api 文档中阅读:https://docs.nativescript.org/api-reference/classes/_ui_text_base_span_.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. You can read the test 看看它是如何使用的。不幸的是,我还无法构建 Playground Demo。