时间戳

首页 > 解决方案 > 如何在 nativescript 中实现父母门

android - 如何在 nativescript 中实现父母门

问题描述

我创建了一个使用 YouTube 的一组嵌入视频的应用程序。由于这是为孩子们制作的，我的应用程序在 6 年后被删除，因为当孩子们可能不小心点击 YouTube 徽标时，我没有实施父母网关 - 它会加载 YouTube 应用程序并继续在那里。

我试图了解，一般来说，我如何能够抓住这样的事件，当某些东西（点击）想要打开另一个应用程序（不仅仅是 youtube）时触发 - 然后激活我作为家长网关创建的页面- 如果答案是正确的 - 那么我继续。

编辑：到目前为止能够做到：

不起作用：到目前为止不起作用的事情：

（1） suspendEvent，当本机应用加载时触发该事件-但不能阻止/禁用/控制中间的“家长门”的本机应用午餐（youtube应用程序仍在加载并在后台-切换家长门页面)

import { on as applicationOn } from "tns-core-modules/application";
...
applicationOn(suspendEvent, this.activateParentalGateway, this);

(2) WebViewExt

它有一个名为 的事件WebViewExt.shouldOverrideUrlLoadingEvent，但我无法在其中加载 YouTube 插件

<WebViewExt debugMode="true" (loaded)="onWebViewLoaded($event)">
  <YoutubePlayer id="player" [src]="settings.player.src"></YoutubePlayer>
</WebViewExt>

webview.on(WebViewExt.shouldOverrideUrlLoadingEvent, (args1: ShouldOverrideUrlLoadEventData) => {
   console.log("shouldOverrideUrlLoadingEvent firing for url : ", args1.url);
   utils.openUrl(args1.url);
});

有本地替代品shouldOverrideUrlLoadingEvent吗？

标签： androidangular2-nativescript

解决方案

我现在想分享我的解决方案，我已经看到了大量与父母门相关的帖子，但没有得到回答。

不确定 Google Play 是否会接受它，但能够在我的应用程序中设置家长门，如果您发现更好的东西，请分享您的答案！

所以我使用这个 pkg：https://github.com/Notalib/nativescript-webview-ext，它是一个 webview 组件（浏览器），我的代码看起来像这样

player.component.html

<GridLayout class="page page-content" xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:nota="@nota/nativescript-webview-ext">

  ... other html code ...
  <nota:WebViewExt (loaded)="onWebViewLoaded($event)"
                   src='https://www.youtube.com/embed/{{ src }}'
                   width="100%" height="100%">
  </nota:WebViewExt>
</GridLayout>

player.component.ts

import { Component, OnInit, NgZone } from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";
import { WebView } from "tns-core-modules/ui/web-view";
import { WebViewExt, ShouldOverrideUrlLoadEventData } from "@nota/nativescript-webview-ext";

/*
  Events
*/
   onWebViewLoaded(args) {        
        let webview: WebView = args.object;

        // This code will grab any click that try to load/switch to an external app/url               
        webview.on(WebViewExt.shouldOverrideUrlLoadingEvent, (_args: ShouldOverrideUrlLoadEventData) => {
            // Disable the event
            _args.cancel = true;            

            // Switch to parental gateway
            this.activateParentalGateway(_args.url);            
        });        
    }    

    activateParentalGateway(blocked_url) {
        if (typeof(blocked_url) !== "string") {            
            return false;
        }

        // run inside the ngZone to connect the event back to the 
        // component state ( otherwise there's no "this" variable )
        this.zone.run(() => {
            this.routerExtensions.navigate(['parental_gateway', blocked_url], {
                transition: {
                    name: "fade"
                }
            });            
        });
    }

parental_gateway.component.html

这是我们问一些“成人”问题的地方……现在只做了两个按钮来测试正确/错误的答案。

<GridLayout columns="*" rows="*">
    <StackLayout row="0" width="100%" orientation="horizontal">    
        <Label text="Answer this question please"  width="20%" height="50"></Label>
        <Button text="Correct" (tap)="answeredCorrect($event)"></Button>
        <Button text="Failed" (tap)="answeredWrong($event)"></Button>
    </StackLayout>
</GridLayout>

parental_gateway.component.ts

import { RouterExtensions } from "nativescript-angular/router";
import { openUrl } from "tns-core-modules/utils/utils";

    answeredCorrect() {
        console.log("Answer was correct");

        // openUrl will actually open the YouTube video
        // in a native app ( basically continue the event )
        openUrl(this.blocked_url);

        // In the background we want to go back from the 
        // parental gate page that we've been in
        // and switch to the video where we first clicked it.
        this.routerExtensions.backToPreviousPage();
    }

    answeredWrong() {
        console.log("Wrong answer go back");
        // Just go back to our page where we've clicked the link
        this.routerExtensions.backToPreviousPage();
    }

希望这对其他人有帮助，如果可以，请投票。

推荐阅读