Frame
<frame>
is a UI component used to display <page>
elements. Every app needs at least a single <frame>
element, usually set as the root element.
See also:
Multiple Frames
If you need to create multiple frames, you can do so by wrapping them in a Layout, for example if you want to have 2 frames side-by-side:
/** @jsx createElement */
<gridLayout columns={[new ItemSpec(1, "star"), new ItemSpec(1, "star")]} rows={[]}>
<frame col={0}/>
<frame col={1}/>
</gridLayout>
A frame with a default page
/** @jsx createElement */
import { Frame } from "@nativescript/core";
interface Props {
forwardedRef: React.RefObject<Frame>;
}
class AppContainer extends React.Component<Props, State> {
private readonly pageRef: React.RefObject<Page> = React.createRef<Page>();
componentDidMount() {
const frame: Frame = this.props.forwardedRef.current!;
frame.navigate({
create: () => {
const page: Page = this.pageRef.current!;
return page;
}
});
}
render() {
const { forwardedRef } = this.props;
return (
<frame ref={forwardedRef}>
<page ref={this.pageRef}>
<actionBar title="Default Page Title" />
<gridLayout>
<label text="Default Page Content" />
</gridLayout>
</page>
</frame>
);
}
}
A frame with a default page from an external component
/** @jsx createElement */
import HomePage from './HomePage';
<frame>
<HomePage />
</frame>
Native component
Android | iOS |
---|---|
org.nativescript.widgets.ContentLayout | UINavigationController |