skimemo

• バックアップ一覧
• 現在との差分 を表示
• ソース を表示
• バックアップ を表示
• skimemo - 日記/2019-04-19/NativeScriptのModal View内で画面遷移する際にcontextを渡す へ行く。
  • 1 (2019-04-19 (金) 06:01:53)
  • 2 (2019-04-19 (金) 06:24:50)
  • 3 (2019-04-23 (火) 07:50:46)
  • 4 (2019-05-06 (月) 12:14:59)

• 追加された行はこの色です。
• 削除された行はこの色です。

#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と渡りません。

** main-page.js [#j141a93e]
#code(){{{
const mainpage = args.object.page;
const context = "some context";
mainpage.showModal("modal-root", context, () => {}, true);    // 全画面でmodal-rootを開く
}}}
** modal-root.xml [#x38b82f4]
#code(){{{
<Frame defaultPage="first-modal-view-page">
}}}

** first-modal-view-page.js [#q80b88bc]
#code(){{{
function onNavigate(args) {
    console.log(args.context);    // undefined
}
exports.onNavigate = onNavigate;
}}}

そこで、[[参考ページ:https://github.com/NativeScript/NativeScript/issues/6271]]の通り、frameを作ってあげてその中の&inlinecode{shownModally};イベントからさらにcontextを渡すようにします。
** main-page.js [#a8eb8e4e]
#code(){{{
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-page",
            context: args.context     // showModal()のcontextを次のページへ渡す
        });
    });
    const page = args.object.page;
    page.showModal(frame, context, () => {}, true);
}
}}}
modal-root.xmlは不要です。~
これでModal Viewの中でnavigateできますし、ActionBarも効くようになりました。

#htmlinsert(twitterbutton.html)
RIGHT:Category: &#x5b;[[NativeScript>日記/Category/NativeScript]]&#x5d; - 06:01:53
----
RIGHT:&blog2trackback();
#comment(above)
#blog2navi()