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と渡りません。
** 公式ドキュメント方式 [#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)=>{
        const component = args.object;
        if(!component.isLayoutValid){     // 一度backgroundにして再表示した場合は処理しない
            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も効くようになりました。
** 2019/4/23追記 [#c22d2724]
参考ページのままだと、HOMEボタンで一旦アプリを閉じた後再表示させた再に再度Navigateしてしまい、backボタンを押しても再度同じ画面が表示される（二重に画面遷移している）事が分かりました。このため、再表示時はnavigateしないよう、7行目のif文を追加しました。~
但し、この&inlinecode{isLayoutValid};の役割についてはいまいちはっきりしていません。それぞれの操作をした際のプロパティの違いを元に実装していますので、場合によっては期待通り動いてくれない事があるかもしれません。

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