--> -->
#blog2navi() *NativeScriptのModal View内で画面遷移する際にcontextを渡す [#w0e3e12c] #title(NativeScriptのModal View内で画面遷移する際にcontextを渡す); NativeScriptの[[Modal View:https://docs.nativescript.org/ui/modal-view]]内で画面遷移する場合、Frameを作ってその中にModal Viewを展開する必要がありますが、公式ドキュメント通りだとcontextと渡りません。 ** 公式ドキュメント方式 [#o3914e1f] ~main-page.js #code(JavaScript,nooutline){{{ const mainpage = args.object.page; const context = "some context"; mainpage.showModal("modal-root", context, () => {}, true); // 全画面でmodal-rootを開く }}} ~ ~modal-root.xml #code(php){{{ <Frame defaultPage="first-modal-view-page"> }}} ~ ~first-modal-view-page.xml #code(php,nooutline){{{ <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 #code(JavaScript,nooutline){{{ function onNavigatingTo(args) { console.log(args.context); // undefined } exports.onNavigate = onNavigate; }}} ** 解決方法 [#h5f220b4] そこで、[[参考ページ:https://github.com/NativeScript/NativeScript/issues/6271]]の通り、frameを作ってあげてその中の&inlinecode{shownModally};イベントからさらにcontextを渡すようにします。 ~ ~main-page.js #code(JavaScript,nooutline){{{ 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 // showModal()のcontextを次のページへ渡す }); }); const page = args.object.page; const context = "some context"; page.showModal(frame, context, () => {}, true); } }}} modal-root.xmlは不要です。~ これでModal Viewの中でnavigateできますし、ActionBarも効くようになりました。 #htmlinsert(twitterbutton.html) RIGHT:Category: [[[NativeScript>日記/Category/NativeScript]]] - 06:01:53 ---- RIGHT:&blog2trackback(); #comment(above) #blog2navi()