HTML5页跳转到Native页面-监听机制

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class WebActivity extends Activity
{
    private WebView myWebView = null;

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web);
        // 打开网页
        myWebView = (WebView) findViewById(R.id.webview);
        myWebView.setWebViewClient(new WebViewClient() {
			@Override
			public boolean shouldOverrideUrlLoading(WebView view, String url) {
				System.out.println("url=" + url);
				if (url.equals("http://jump2native/other")) {
					startActivity(new Intent(WebActivity.this,  OtherActivity.class)); //OtherActivity是另一个Native页面
	                return true;
				} else {
					view.loadUrl(url);
					return super.shouldOverrideUrlLoading(view, url);
				}
			}
        });
        //myWebView.loadUrl("http://m.baidu.com/");// 百度链接
        String htmlString = "<html><head></head><body><a href='http://jump2native/other'>HTML5 jump to native</a></body></html>";
        // 载入这个html页面
        myWebView.loadData(htmlString, "text/html", "utf-8");
    }
}

如果你是在 React Native 中使用 WebView 来加载 H5 页面,那么你可以通过以下步骤来设置指定返回的页面: 1. 在 H5 页面中,当用户点击返回按钮时,通过 JavaScript 发送消息到 React Native 端,告知需要返回到哪个页面。 2. 在 React Native 端,监听 WebView 的 onMessage 事件,当收到来自 H5 页面的消息时,调用 NativeModules 的方法返回指定页面。 具体实现代码如下: 在 H5 页面中,添加以下代码: ```javascript // 当用户点击返回按钮时,通过 postMessage 方法向 React Native 端发送消息 window.postMessage(JSON.stringify({ type: 'back', url: '指定返回的页面 URL' })) ``` 在 React Native 端,添加以下代码: ```javascript import { NativeModules } from 'react-native'; // 监听 WebView 的 onMessage 事件 <WebView onMessage={(event) => { const data = JSON.parse(event.nativeEvent.data); if (data.type === 'back') { // 调用 NativeModules 的方法返回指定页面 NativeModules.NavigationModule.goBack(data.url); } }} /> // 在 NativeModules 中定义 NavigationModule,实现返回指定页面的方法 const NavigationModule = { goBack(url) { // 判断当前页面是否是指定页面,如果是则返回上一,否则跳转到指定页面 if (this.props.navigation.state.routeName === url) { this.props.navigation.goBack(); } else { this.props.navigation.navigate(url); } } }; ``` 注意:以上代码只是示例,具体实现需要根据你的项目结构和需求进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值