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(){{{
** 公式ドキュメント方式 [#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 [#x38b82f4]
#code(){{{
~
~modal-root.xml
#code(php){{{
<Frame defaultPage="first-modal-view-page">
}}}

** first-modal-view-page.js [#q80b88bc]
#code(){{{
function onNavigate(args) {
~
~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 [#a8eb8e4e]
#code(){{{
~
~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-page",
            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: &#x5b;[[NativeScript>日記/Category/NativeScript]]&#x5d; - 06:01:53
----
RIGHT:&blog2trackback();
#comment(above)
#blog2navi()