Error: ActionItem is not a valid View instance

Question

我有以下模板：

<Page.actionBar>
    <ActionBar title="Modules" automationText="ActionBar">
        <NavigationButton icon="res://back_btn" tap="goBack" automationText="GoBack"></NavigationButton>
        <Android>
            <ActionItem id="exampleMenuButton" icon="res://menu" automationText="ExampleMenu"></ActionItem>
        </Android>
        <iOS>
            <ActionItem id="exampleMenuButton" ios.position="right" automationText="ExampleMenu">
                <ActionItem.actionView>
                    <Image src="res://menu" width="22" height="22" margin="0, -11, 0, 11"></Image>
                </ActionItem.actionView>
            </ActionItem>
        </iOS>
    </ActionBar>
</Page.actionBar>

来自nativescript-marketplace-demo。首先我不得不将标签更改为不自动关闭，因为 Only void and foreign elements can be self closed "NavigationButton"-like 错误现在得到如下所示的错误，为什么？

CONSOLE ERROR file:///app/vendor.js:1688:24: ERROR Error: Uncaught (in promise): Error: ActionItem is not a valid View instance.
_addView@file:///app/vendor.js:77124:28 [angular]
addChild@file:///app/vendor.js:79138:22 [angular]
insertChild@file:///app/vendor.js:58553:32 [angular]
appendChild@file:///app/vendor.js:57775:38 [angular]
appendChild@file:///app/vendor.js:13726:34 [angular]
createElement@file:///app/vendor.js:9925:33 [angular]
createViewNodes@file:///app/vendor.js:12532:57 [angular]
callViewAction@file:///app/vendor.js:12944:28 [angular]
execComponentViewsAction@file:///app/vendor.js:12883:27 [angular]
createViewNodes@file:///app/vendor.js:12601:29 [angular]
createRootView@file:///app/vendor.js:12479:20 [angular]
callWithDebugContext@file:///app/vendor.js:13610:47 [angular]
create@file:///app/vendor.js:10415:60 [angular]
createComponent@file:///app/vendor.js:10615:68 [angular]
activateOnGoForward@file:///app/vendor.js:48567:70 [angular]
activateWith@file:///app/vendor.js:48553:37 [angular]
placeComponentIntoOutlet@file:///app/vendor.js:23184:28 [angular]
activateRoutes@file:///app/vendor.js:23165:50 [angular]
file:///app/vendor.js:23101:72 [angular]
forEach@[native code] [angular]
activateChildRoutes@file:///app/vendor.js:23101:36 [angular]
activate@file:///app/vendor.js:23075:33 [angular]
file:///app/vendor.js:22692:30 [angular]
file:///app/vendor.js:230:25 [angular]
...

Answer 1

您尝试使用的 XML 模板是 PAN (Plain Awesome N ativeScript) 文件，而不是 NAN (NativeScript ANgular) 文件。

理解这一点实际上非常关键，有些东西只能在 PAN 中工作，有些东西只能在 NAN 中工作。它们写得非常相似，但有几个关键的区别...

例如，在 PAN 中它被标记为 .XML 文件，在 NAN 中它通常被标记为 HTML 文件。在 PAN 中，你有 Page 标签，在 NAN 中，你通常跳过 Page 标签并使用 Router 标签。在 PAN 中，您的所有标签都可以选择自行关闭。在 NAN 中，所有标签最好不要自闭。

在 PAN 中，所有事件都像 xml 文件中的任何其他属性一样对待；即 tap="goback"。和label="hi"一样，在NAN中，那个点击事件应该写成(tap)="goback()"

这些只是其中的一小部分差异，还有许多其他差异会使两种格式彼此不兼容，而无需您对屏幕进行更改。

既然您正在尝试学习 NAN，我建议您查看 https://github.com/NativeScript/sample-Groceries/ 示例应用程序。本APP完全用NAN编写。

此外，http://docs.nativescript.org 具有 PAN 和 NAN 应用程序的完整文档。

Error: ActionItem is not a valid View instance

Error: ActionItem is not a valid View instance

nativescript

angular2-nativescript

nativescript-telerik-ui