错误：ActionItem 不是有效的 View 实例

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 NativeScript) 文件，而不是 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 应用程序的完整文档。