_ NativeScriptのModal View内で画面遷移する際にcontextを渡す
NativeScriptのModal View内で画面遷移する場合、Frameを作ってその中にModal Viewを展開する必要がありますが、公式ドキュメント通りだとcontextと渡りません。
_ 公式ドキュメント方式
main-page.js
1
2
3
| | const mainpage = args.object.page;
const context = "some context";
mainpage.showModal("modal-root", context, () => {}, true);
|
modal-root.xml
1
| <Frame defaultPage="first-modal-view-page">
|
first-modal-view-page.xml
1
2
3
4
5
6
| <Page backgroundColor="green" navigatingTo="onNavigatingTo">
<StackLayout backgroundColor="lightGreen">
<Button text="Navigate" tap="onNavigate"/>
<Button text="Close Modal" tap="onCloseModal"/>
</StackLayout>
</Page>
|
first-modal-view-page.js
1
2
3
4
| | function onNavigatingTo(args) {
console.log(args.context); }
exports.onNavigate = onNavigate;
|
_ 解決方法
そこで、参考ページの通り、frameを作ってあげてその中のshownModallyイベントからさらにcontextを渡すようにします。
main-page.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| | const Frame = require("tns-core-modules/ui/frame").Frame;
function onTap(args){
const frame = new Frame();
frame.on("shownModally",(args)=>{
frame.navigate({
moduleName: "first-modal-view-page",
context: args.context });
});
const page = args.object.page;
const context = "some context";
page.showModal(frame, context, () => {}, true);
}
|
modal-root.xmlは不要です。
これでModal Viewの中でnavigateできますし、ActionBarも効くようになりました。