Question

我正在尝试按照here所述创建自定义组件，以便在我的应用的不同位置重用操作栏及其逻辑。以下是我设置组件的内容：

/components/header/header.xml

<ActionBar title="Title" class="{{ 'mode' == dark ? 'bg-dark' : 'bg-white' }}" loaded="loaded">
</ActionBar>

/components/header/header.ts

exports.loaded = (args) => {
    let page = <Page> args.object;
    let pageObservable = new Observable({
        'mode' : page.get('mode')
    });
    page.bindingContext = pageObservable;
}

然后我尝试使用这样调用它的组件：

some_view.xml

<Page 
 xmlns="http://schemas.nativescript.org/tns.xsd"
 xmlns:header="components/header">

<header:header mode="dark"/>
<StackLayout>..</StackLayout>
...
</Page>

但是，导航到`some-view.xml'我收到以下错误：

Calling js method onCreateView failed
TypeError: Cannot read property frame of 'undefined'
File "data...../ui/action-bar/action-bar.js" line: 146

我做错了吗？您是否成功创建了基于ActionBar的自定义组件？

Answer 1

问题可能是您试图在loaded文件的/components/header/header.ts方法中获取Page实例。 args会返回ActionBar而不是Page的引用。另一方面，在使用TypeScript时，事件应该像export function loaded(args){...}一样定义。在上面给出的代码中，您使用的是JavaScript语法。我附上了示例代码，其中显示了如何创建自定义组件。

<强>组件/动作杆/动作bar.xml

<ActionBar loaded="actionbarLoaded" title="Title" icon="">
    <NavigationButton text="Back" icon="" tap="" />
    <ActionBar.actionItems>
        <ActionItem icon="" text="Left" tap="" ios.position="left" />
        <ActionItem icon="" text="Right" tap="" ios.position="right" />
    </ActionBar.actionItems>
</ActionBar>

<强>组件/动作杆/动作bar.ts

export function actionbarLoaded(args){
     console.log("actionbar loaded");
 }

主要-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" xmlns:AB="component/action-bar"> <Page.actionBar> <AB:action-bar /> </Page.actionBar> <StackLayout> <Label text="Tap the button" class="title"/> <Button text="TAP" tap="{{ onTap }}" /> <Label text="{{ message }}" class="message" textWrap="true"/> </StackLayout> </Page>

主要-page.ts

import { EventData } from 'data/observable'; import { Page } from 'ui/page'; import { HelloWorldModel } from './main-view-model'; // Event handler for Page "navigatingTo" event attached in main-page.xml export function navigatingTo(args: EventData) { // Get the event sender let page = <Page>args.object; page.bindingContext = new HelloWorldModel(); }

Nativescript ActionBar自定义组件

1 个答案: