react-native <WebView>内部网页跳转并返回上一级

本文介绍在使用Rn的WebView控件时,如何通过监听原生返回键和自定义按钮来实现网页内部跳转的返回功能。具体包括添加返回键监听、定义回调方法以及更新WebView导航状态。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用Rn的WebView控件时,遇到的网页内部跳转如何返回的问题。

  • 点原生Back键返回;
  • 点左上角返回键返回;

上代码

import React, {Component} from 'react';
import {StyleSheet, Platform, View, WebView, BackAndroid} from 'react-native';
import * as CommonUI from 'rncommonui';
import Separator from '../../common/SeperatorLine';

var WEB_URL = 'http://www.baidu.com';
var WEB_VIEW_REF = 'webview';

export default class AboutDeveloperPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            webUrl: WEB_URL,
            scalesPageToFit: false,
        };
        // 添加返回键监听
        this.addBackAndroidListener(this.props.navigator);
    }

    render() {
        return (
            <View style={{backgroundColor: '#000000', flex: 1}}>
                <CommonUI.NaviBar title="关于开发者" onLeft={this.state.backButtonEnabled?this.goBack:null}/>
                <Separator />
                <WebView
                    ref={WEB_VIEW_REF}
                    style={styles.webView}
                    source={{uri: this.state.webUrl}}
                    scalesPageToFit={this.state.scalingEnabled}
                    onNavigationStateChange={this.onNavigationStateChange}/>
            </View>
        );
    }

    goBack = () => {
        this.refs[WEB_VIEW_REF].goBack();
    };

    // 监听返回键事件
    addBackAndroidListener(navigator) {
        if (Platform.OS === 'android') {
            BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
        }
    }

    onBackAndroid = ()=> {
        if (this.state.backButtonEnabled) {
            this.refs[WEB_VIEW_REF].goBack();
            return true;
        } else {
            return false;
        }
    };

    onNavigationStateChange = (navState)=> {
        this.setState({
            backButtonEnabled: navState.canGoBack,
        });
    };
}

点原生Back键返回:

1.首先要添加backandroid监听

// 监听返回键事件
    addBackAndroidListener(navigator) {
        if (Platform.OS === 'android') {
            BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
        }
    }

用以实现自定义onBackAndroid回调方法。

onBackAndroid = ()=> {
        if (this.state.backButtonEnabled) {
            this.refs[WEB_VIEW_REF].goBack();
            return true;
        } else {
            return false;
        }
    };

返回true代表不调用默认返回功能,返回false代表退出当前界面。

this.refs[WEB_VIEW_REF].goBack();//回退<WebView>控件内部跳转的页面。

返回WebView界面还是退出当前页取决于

this.state.backButtonEnabled//代表是否能回退

WebView内部跳转后状态改变时回调:

onNavigationStateChange = (navState)=> {
        this.setState({
            backButtonEnabled: navState.canGoBack,
        });
    };

改变this.state.backButtonEnabled状态。

点左上角返回键返回

<CommonUI.NaviBar title="关于开发者" onLeft={this.state.backButtonEnabled?this.goBack:null}/>

关键是onLeftfang方法定义,null代表点击直接返回当前页。
this.goBack方法用于WebView内部页面返回。

goBack = () => {
        this.refs[WEB_VIEW_REF].goBack();
    };
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值