我正在通过反应本机的 WebView 显示一个网站。此网站上有一个 PassWallet (.pkpass) 文件的链接(不是唯一的用例)。当我单击此网站上的任何链接时,我想检查它是否是其他网站或 .pkpass 文件或其他文件。当此检查运行时,我不想加载任何内容,只需等待我的功能完成,我就知道是否应该打开一个网站或打开另一个应用程序或其他什么。我想在 JavaScript 方面实现这一点,因为我的整个路由功能都在那里,并且在我看来,react-native 是为这种情况构建的:-)
iOS 上有这个漂亮的功能onShouldStartLoadWithRequest
这正是我所需要的。
_onShouldStartLoadWithRequest(e) {
if(checkUrl(e.url)) {
let Router = this.props.navigator.props.router;
let route = Router.getRouteFromUrl(e.url);
this.props.navigator.push(route);
return false;
}
return true;
}
我收到事件 (e) 并且可以检查它尝试加载的网址。我什至可以检查 e.navigationType 是否是单击或其他什么。
现在Android上不存在这个功能。在本机端有这个功能shouldOverrideUrlLoading
但react-native中并没有实现这个功能。
我发现以下 GitHub 问题/PRhttps://github.com/facebook/react-native/pull/6478我想现在,因为这个问题已经关闭并且有解释,所以这个功能没有得到实现。
于是我开始自己寻找方法。我创建了一个显示 WebView 的本机 UI 组件,然后实现此方法。
CustomWebViewManager.java:
package ch.mypackage;
import android.support.annotation.Nullable;
import android.webkit.WebView;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.annotations.ReactProp;
public class CustomWebViewManager extends SimpleViewManager<CplusWebView> {
@Override
public String getName() {
return "CplusWebView";
}
@Override
protected CustomWebView createViewInstance(ThemedReactContext reactContext) {
return new CustomWebView(reactContext);
}
@ReactProp(name = "url")
public void setUrl(CustomWebView view, @Nullable String url) {
view.loadUrl(url);
}
@ReactProp(name = "javascriptEnabled")
public void setJavascriptEnabled(CustomWebView view, boolean enabled) {
view.getSettings().setJavaScriptEnabled(enabled);
}
}
自定义WebView.java
package ch.couponplus;
import android.util.Log;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.events.EventDispatcher;
import com.facebook.react.uimanager.events.RCTEventEmitter;
public class CustomWebView extends WebView {
EventDispatcher eventDispatcher;
EventWebClient eventWebClient;
public CustomWebView(ThemedReactContext reactContext) {
super(reactContext);
eventWebClient = new EventWebClient();
setWebViewClient(eventWebClient);
}
protected class EventWebClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
WritableMap event = Arguments.createMap();
event.putString("message", "MyMessage");
ReactContext reactContext = (ReactContext)getContext();
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
getId(),
"topChange",
event);
return true;
}
}
}
它按预期工作。我现在可以触发shouldOverrideUrlLoading
JS 中的函数并生成日志或其他内容。
但我的问题是我现在该如何设置true
or false
在Javascript中控制我的shouldOverrideUrlLoading
功能?有没有可能让我自己的功能可用?到目前为止我只成功触发了onChange
event?
我只想做和我在 iOS 中做的一样的事情。也许有人出现并告诉我,无论出于何种原因,这是不可能的,但我应该如何或你如何处理这样的情况?我知道有 URL 模式,但我知道它们在这种情况下不起作用。